/* ==========================================================================
   Design tokens (D-58). Evolved from D-57; same token names, so components port as a diff.
   Colour comes from the 2026 logo: flag red, royal navy and blue, with azure and cyan as
   graphic-only accents. Every text/UI pairing below was checked for WCAG AA.
   Rules: eight font sizes (--fs-1 .. --fs-7 + --fs-body), motion scaled by --m,
   no hex colours outside this file (plugins fall back to these names), no raw z-index numbers.
   ========================================================================== */

/* Mukta: Devanagari + Latin subsets, 400/700 only (500 dropped for weight, D-22). */
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mukta-devanagari-400.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/mukta-devanagari-700.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Mukta"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/mukta-latin-400.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: "Mukta"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/mukta-latin-700.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: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-latin-700.woff2") format("woff2"); }
/* Martel 700 is the only weight shipped: display headlines and pull-quotes (supersedes D-47, which limited it to opinion). */
@font-face { font-family: "Martel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/martel-devanagari-700.woff2") format("woff2"); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; }
@font-face { font-family: "Martel"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/martel-latin-700.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; }
/* Fallback metrics: the webfont swapping in must not re-wrap headlines (CLS). Devanagari values were measured on Windows (Nirmala UI); other platforms are approximate. */
@font-face { font-family: "Inter Fallback"; font-weight: 100 599; src: local("Arial"); size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%; }
/* Bold has its own face: Arial regular at 107% is 1.7% narrower than Inter Bold, enough to re-wrap a two-column archive header when the webfont lands. Measured: Inter 700 / Arial Bold = 1.02. */
@font-face { font-family: "Inter Fallback"; font-weight: 600 900; src: local("Arial Bold"), local("Arial-BoldMT"); size-adjust: 102%; ascent-override: 95%; descent-override: 23.6%; line-gap-override: 0%; }
@font-face { font-family: "Mukta Fallback"; font-weight: 400; src: local("Nirmala UI"), local("Noto Sans Devanagari"); size-adjust: 88%; }
@font-face { font-family: "Mukta Fallback"; font-weight: 700; src: local("Nirmala UI Bold"), local("Noto Sans Devanagari"); size-adjust: 85%; }
@font-face { font-family: "Martel Fallback"; font-weight: 700; src: local("Nirmala UI Bold"), local("Noto Serif Devanagari"); size-adjust: 93.5%; }

:root {
	color-scheme: light;

	/* Colour: brand (from the logo) */
	--brand: #D5040A;            /* flag red: live/breaking, the wordmark, one primary CTA per view */
	--brand-ink: #A30509;
	--navy: #082577;             /* royal navy: structure (nav bar, footer, bands), headings */
	--navy-2: #0A3FA4;           /* navy hover, mid blue */
	--blue: #0B5ED3;             /* links and interactive text (5.9:1 on white) */
	--azure: #0E8BF0;            /* graphic accent only: 3.5:1, never body text */
	--cyan: #22CDF5;             /* glow accent on navy only */
	--sky: #8CC8F5;              /* focus ring and current-item mark on navy (7.6:1) */
	--gold: #E3AB1B;             /* the gold-price icon in the header: graphic only, never text */
	--gold-deep: #8A5A00;        /* its edge (5.3:1 on the utility bar) */
	--gold-shine: #FFF3C4;       /* its highlight */
	--tint: #EAF3FF;
	--ink: #0B1220;
	--text: #2B303B;
	--muted: #5F6B7A;
	--line: #E3E8EF;
	--line-strong: #8A94A6;      /* form-control and outline borders, 3:1 */
	--bg: #FFFFFF;
	--bg-soft: #F5F7FA;
	--white: #FFFFFF;
	--live: #D5040A;
	--success-text: #15803D;     /* green as text */
	--warn: #F59E0B;
	--heading: var(--navy);
	--on-navy: #FFFFFF;
	--on-navy-muted: #BFCDF0;    /* 8.6:1 on navy */
	--band-bg: var(--navy);      /* navy feature bands */
	--footer-bg: var(--navy);
	/* Roles that must keep AA contrast in both modes (D-57) */
	--brand-fill: #D5040A;       /* filled buttons/badges with white text (stays deep red in dark mode) */
	--brand-fill-ink: #A30509;   /* their hover */
	--live-fill: #D5040A;        /* live/breaking labels and badges with white text */
	--fill-selected: var(--navy);/* selected pill/tab/page fill with white text */
	--focus: var(--blue);        /* focus ring; set to --sky on navy surfaces */
	--disabled-opacity: 0.5;
	--scrim: rgb(6 20 60 / 0.55);
	--image-edge: rgb(11 18 32 / 0.12);
	--shadow-pop: 0 10px 30px rgb(8 37 119 / 0.14);
	--placeholder: #C9D8EE;      /* ad and loading placeholders */
	--img-dim: 1;                /* photos are dimmed slightly in dark mode */
	--letterbox: #050B24;        /* bars around non-16:9 photos in the photo slider: dark in both themes */

	/* Category accents: kicker text and a 3px rule only. All >= 4.5:1 on white. */
	--c-news: var(--navy);  --c-politics: #3730A3;  --c-economy: var(--blue);  --c-society: #6D28D9;
	--c-sports: #C2410C;  --c-entertainment: #BE185D;  --c-tech: #0E7490;  --c-world: var(--navy);
	--c-health: #15803D;  --c-opinion: #92400E;

	/* Type: families */
	--font-ne: "Mukta", "Mukta Fallback", "Noto Sans Devanagari", "Nirmala UI", "Inter", system-ui, sans-serif;
	--font-ui: "Inter", "Inter Fallback", "Mukta", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: var(--font-ne);
	--font-display: "Martel", "Martel Fallback", "Noto Serif Devanagari", "Nirmala UI", Georgia, serif;
	--font-serif: var(--font-display);   /* legacy name */

	/* Type: eight sizes. Nothing else is allowed on a page. */
	--fs-1: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);    /* 28 to 40  display + article H1 (Martel) */
	--fs-2: clamp(1.5rem, 1.2rem + 0.9vw, 1.75rem);    /* 24 to 28  block lead, pull-quote (Martel) */
	--fs-3: 1.5rem;                                    /* 24        section title, article h2 */
	--fs-4: 1.25rem;                                   /* 20        lead-card title, dek */
	--fs-body: clamp(1.125rem, 1.1rem + 0.1vw, 1.1875rem); /* 18 on phones to 19: article body */
	--fs-5: 1.0625rem;                                 /* 17        small-card title */
	--fs-6: 1rem;                                      /* 16        nav, buttons, inputs, ticker */
	--fs-7: 0.875rem;                                  /* 14        meta, kicker, labels (Devanagari floor) */
	--lh-display: 1.45;      /* Martel Devanagari headlines: 1.45 keeps matras clear (1.3 leaves 1px) */
	--lh-title: 1.4;
	--lh-ui: 1.5;
	--lh-body: 1.85;

	--lh-tight: 1.3;

	/* Space */
	--s-1: 4px;
	--s-2: 8px;
	--s-3: 12px;
	--s-4: 16px;
	--s-5: 24px;
	--s-6: 32px;
	--s-7: 48px;
	--s-8: 64px;

	/* Shape: images 4, controls 8, pills full. Nested = outer radius equals inner plus padding. */
	--radius: 4px;
	--radius-lg: 8px;
	--radius-pill: 999px;

	/* Layout */
	--container: 1240px;
	--gutter: 24px;
	--page-gutter: 16px;
	--measure: 720px;
	--nav-h: 48px;
	/* Height of the stuck header, for sticky offsets and anchor jumps: the nav bar on desktop;
	   logo row + category tabs on phones/tablets. The shell sets the measured values. */
	--sticky-h: var(--nav-h);

	/* Layers */
	--z-sticky: 40;
	--z-menu: 50;
	--z-toast: 70;
	--z-skip: 100;

	/* Motion: purposeful and short. UI never exceeds 300ms. --m scales every transform (0 when reduced). */
	--m: 1;
	--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
	--ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
	--dur-press: 160ms;
	--dur-hover: 150ms;
	--dur-pop: 180ms;
	--dur-drawer: 260ms;
}

@media (prefers-reduced-motion: reduce) {
	:root { --m: 0; }
}

/* --sticky-h per breakpoint, including the logged-in admin bar, is owned by header.css (measured there). */

/* Devanagari: matras and conjuncts need a 14px floor and a looser headline leading (D-57). */
:root:lang(ne) {
	--lh-tight: 1.4;
}

/* English UI: Latin-first stack (D-03), and Latin line heights: the defaults are tuned for Devanagari's
   tall matras and conjuncts and look gappy in English (D-55). Martel's Latin cut is used only for display sizes. */
:root:lang(en) {
	--font-body: var(--font-ui);
	--lh-ui: 1.5;
	--lh-body: 1.65;
	--lh-title: 1.3;
	--lh-display: 1.2;
}

/* Dark: a designed palette with separate steps, not an inversion. Written twice only because CSS cannot share
   a block between a media query and an attribute selector; keep the two identical. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--brand: #FF4B55;
		--brand-ink: #FF8A90;
		--blue: #5EA6FF;
		--tint: #101C45;
		--ink: #F2F4F8;
		--text: #C9CFDA;
		--muted: #98A1B2;
		--line: #1D2B57;
		--line-strong: #5A6B9A;
		--bg: #070E2B;
		--bg-soft: #0D1738;
		--heading: #F2F4F8;
		--band-bg: #0A2270;
		--footer-bg: #050B24;
		--live: #FF4B55;
		--success-text: #4ADE80;
		--fill-selected: #1F5FCB;
		--focus: #8CC8F5;
		--scrim: rgb(0 0 0 / 0.65);
		--image-edge: rgb(255 255 255 / 0.12);
		--shadow-pop: 0 10px 30px rgb(0 0 0 / 0.5);
		--placeholder: #1B2B55;
		--img-dim: 0.92;
		--c-news: #8CC8F5;  --c-politics: #818CF8;  --c-economy: #6FA8EC;  --c-society: #A78BFA;
		--c-sports: #FB923C;  --c-entertainment: #F472B6;  --c-tech: #22D3EE;  --c-world: #8CC8F5;
		--c-health: #4ADE80;  --c-opinion: #F59E0B;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--brand: #FF4B55;
	--brand-ink: #FF8A90;
	--blue: #5EA6FF;
	--tint: #101C45;
	--ink: #F2F4F8;
	--text: #C9CFDA;
	--muted: #98A1B2;
	--line: #1D2B57;
	--line-strong: #5A6B9A;
	--bg: #070E2B;
	--bg-soft: #0D1738;
	--heading: #F2F4F8;
	--band-bg: #0A2270;
	--footer-bg: #050B24;
	--live: #FF4B55;
	--success-text: #4ADE80;
	--fill-selected: #1F5FCB;
	--focus: #8CC8F5;
	--scrim: rgb(0 0 0 / 0.65);
	--image-edge: rgb(255 255 255 / 0.12);
	--shadow-pop: 0 10px 30px rgb(0 0 0 / 0.5);
	--placeholder: #1B2B55;
	--img-dim: 0.92;
	--c-news: #8CC8F5;  --c-politics: #818CF8;  --c-economy: #6FA8EC;  --c-society: #A78BFA;
	--c-sports: #FB923C;  --c-entertainment: #F472B6;  --c-tech: #22D3EE;  --c-world: #8CC8F5;
	--c-health: #4ADE80;  --c-opinion: #F59E0B;
}

/* Navy surfaces: the blue focus ring is too weak on navy, sky is 7.6:1. Light surfaces (the sidebar
   newsletter box, the cookie bar, the sticky ad) keep the blue ring: sky on white or tint is 1.6:1. */
.site-nav,
.site-footer,
.band,
.on-navy { --focus: var(--sky); }