/* ==========================================================================
   Voice of Akash — design tokens
   Loaded on every page (also in the block editor).
   ========================================================================== */

/* Fonts: self-hosted variable fonts (SIL Open Font License, see assets/fonts). */
@font-face {
	font-family: "Cormorant Garamond";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Cormorant Garamond";
	font-style: italic;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/cormorant-garamond-latin-wght-italic.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/manrope-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	/* Colour — brief values */
	--voa-ink: #0F0D0B;
	--voa-charcoal: #2A2622;
	--voa-paper: #F5F1EA;
	--voa-cream: #EDE6DA;
	--voa-brass: #8C6A3F;
	--voa-brass-light: #C8A97E;
	--voa-forest: #2E4A3F;
	--voa-line: rgba(140, 106, 63, 0.22);
	--voa-line-dark: rgba(245, 241, 234, 0.20);
	--voa-white: #FFFDF8;

	/* Colour — accessibility additions
	   #8C6A3F on paper is 4.39:1 (below AA for body-size text), so brass
	   *text* uses a deeper brass. --voa-brass stays for borders and accents. */
	--voa-brass-text: #7A5C35;   /* 5.5:1 on paper, 5.0:1 on cream */
	--voa-muted: #5E564D;        /* secondary text, 6.4:1 on paper */
	--voa-on-dark: #F5F1EA;      /* 17:1 on ink */
	--voa-on-dark-muted: #C8BFB2;/* 10.7:1 on ink */
	--voa-line-strong: rgba(140, 106, 63, 0.45);
	--voa-error: #9E2B25;        /* 6.6:1 on paper */
	--voa-success: var(--voa-forest);
	--voa-focus: var(--voa-forest);
	--voa-focus-on-dark: var(--voa-brass-light);

	/* Type */
	--voa-font-serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
	--voa-font-sans: Manrope, "IBM Plex Sans", Arial, sans-serif;
	--voa-text-base: 1rem;
	--voa-leading: 1.65;
	--voa-h1: clamp(2.5rem, 1.55rem + 2.2vw, 4rem);
	--voa-h2: clamp(2rem, 1.55rem + 1.5vw, 3.2rem);
	--voa-h3: clamp(1.35rem, 1.2rem + 0.5vw, 1.75rem);
	--voa-h4: 1.25rem;
	--voa-text-small: 0.875rem;
	--voa-text-label: 0.75rem;
	--voa-tracking-tight: -0.015em;
	--voa-tracking-label: 0.16em;

	/* Layout */
	--voa-content-max: 1200px;
	--voa-reading-max: 720px;
	--voa-gutter: clamp(1rem, 4vw, 2.5rem);
	--voa-section-y: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); /* 40px phone → 68px desktop */

	--voa-space-xs: 0.5rem;
	--voa-space-sm: 1rem;
	--voa-space-md: 1.5rem;
	--voa-space-lg: 2rem;
	--voa-space-xl: 3rem;
	--voa-space-2xl: 4.5rem;

	--voa-radius: 0;
	--voa-control-h: 3rem; /* 48px: comfortably above the 44px touch target */

	/* Header: one sticky row */
	--voa-header-h: 4.5rem;
	--voa-header-h-mobile: 4rem;
	/* Kept for compatibility with older rules: the header is now one row. */
	--voa-masthead-h: 0px;
	--voa-nav-h: var(--voa-header-h);

	/* Motion */
	--voa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--voa-transition-fast: 200ms var(--voa-ease);
	--voa-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--voa-transition-slow: 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--voa-transition-reveal: 700ms cubic-bezier(0.22, 0.61, 0.36, 1);
	--voa-transition-carousel: 1200ms ease-in-out;

	/* ----------------------------------------------------------------------
	   Parent theme (Modern) variables mapped to the tokens.
	   Modern colours everything through these custom properties
	   (assets/css/custom-styles.css), so mapping them recolours header,
	   intro, content, footer, buttons and focus rings in one place.
	   Note: these take precedence over Customizer → Colors values.
	   ---------------------------------------------------------------------- */
	--background_color: var(--voa-paper);
	--background_color--a0: rgba(245, 241, 234, 0);

	--color_accent: var(--voa-brass-text);
	--color_accent--a0: rgba(122, 92, 53, 0);
	--color_accent_text: var(--voa-white);

	--color_header_background: var(--voa-ink);
	--color_header_text: var(--voa-on-dark);
	--color_header_text--a20: var(--voa-line-dark);
	--color_header_headings: var(--voa-on-dark);

	--color_intro_background: var(--voa-ink);
	--color_intro_text: var(--voa-on-dark);

	--color_content_background: var(--voa-paper);
	--color_content_text: var(--voa-charcoal);
	--color_content_text--a20: var(--voa-line);
	--color_content_headings: var(--voa-ink);

	--color_footer_background: var(--voa-ink);
	--color_footer_text: var(--voa-on-dark-muted);
	--color_footer_text--a20: var(--voa-line-dark);
	--color_footer_headings: var(--voa-on-dark);

	--typography_size_html: 100%;
	--typography_fonts_text: var(--voa-font-sans);
	--typography_fonts_headings: var(--voa-font-serif);
	--typography_fonts_logo: var(--voa-font-serif);

	--layout_width_content: var(--voa-content-max);
}