/* =============================================================================
   KilusNa — DESIGN TOKENS (light + dark)
   -----------------------------------------------------------------------------
   Single source of truth for colour, type, spacing, radius, shadow, focus and
   layout. Every component consumes these variables; no component may hardcode a
   hex value (the only gradients that live outside this file are tokenised here
   too — thumbnail / hero surfaces are decorative, never text-bearing).

   Rationale for AA adjustments vs. the reference (alamin-design.html):
   - reference --faint #9ca3af is 2.5:1 on white → replaced with #736a5f (5.3:1)
   - reference --muted  #6b7280 is used at 11–13px → replaced with #676055 (6.2:1)
   - status greens/ambers are extrapolated from the reference badge construction
     (soft bg + pill) but their TEXT is always --text so 10px labels clear 4.5:1
   - --accent-text exists so gold used as *text/icon* can be remapped on dark
     (12.1:1) while --accent keeps doing solid fills (label 11.4:1) — and so gold
     borders/rings keep a visible edge, since a bare --accent edge on a light
     page is only 1.6:1
   Accent = the brand logo's golden yellow; black-on-gold (--on-accent) mirrors
   the logo. Red stays reserved for negative/urgent ONLY.
   ============================================================================= */

:root {
  color-scheme: light;

  /* Accent — gold = interactive/positive; red = negative/urgent ONLY */
  --accent: #ffc80d;        /* logo yellow: solid fills (11.42:1 label) */
  --accent-dark: #e0a800;   /* hover/pressed fill (8.25:1 label) */
  --accent-soft: #fff4cc;   /* pale plates: chips, hero, active rows */
  --accent-line: #f0dda0;   /* decorative hairline on --accent-soft panels */
  /* Gold used as TEXT, ICON or STATE BORDER colour (remapped on dark). It is
     a bronze, because --accent itself cannot carry text or an edge on a light
     page: 5.93:1 on --card, 5.53:1 on --bg, 5.38:1 on --accent-soft. */
  --accent-text: #8a5a00;
  --red: #d62217;           /* 5.12:1 on --card, 4.78:1 on --bg */
  --red-soft: #fdeceb;

  /* Boundary of text inputs / search fields. The reference's --border and
     --border-strong are 1.2–1.5:1 on a card, which fails WCAG 1.4.11 for the
     one element whose border IS its affordance (4.5:1 text is unaffected).
     Supplementary token; decorative card borders keep --border. */
  --input-border: #858d99;   /* 3.35:1 on --card, 3.13:1 on --bg */

  /* Status (extrapolated; same pill construction as reference badges) */
  --green: #15803d;
  --green-soft: #e7f6ec;
  --amber: #b45309;
  --amber-soft: #fdf3e3;

  /* Neutrals (AA-adjusted, warm-tinted to sit with the logo's black/grey) */
  --text: #15120e;
  --body: #3f3a32;
  --muted: #676055;
  --faint: #736a5f;
  --border: #e7e3dc;
  --border-strong: #d5cfc5;
  --bg: #f8f7f4;
  --card: #ffffff;
  --hover: #f5f3ee;

  /* On-solid + utility colours (theme-independent on purpose) */
  --white: #ffffff;
  --on-accent: #111827;      /* BLACK on the gold fill, as in the logo (11.42:1) */
  --scrim: rgba(15, 23, 42, .55);   /* modal / drawer backdrop */
  --img-chip: rgba(17, 24, 39, .75); /* image-count chip on thumbnails */
  --play-bg: rgba(17, 24, 39, .62);  /* video play button plate */
  --toast-bg: #111827;
  --toast-text: #ffffff;

  /* Decorative-only surfaces (tokens so components stay hex-free). Nothing
     text-bearing sits directly on a gradient: thumbnail/video copy and chips
     sit on their own dark plates (--img-chip ≥9.3:1, --play-bg ≥6.3:1, white
     glyph/label — see contrast-audit.md). */
  --grad-t1: linear-gradient(160deg, #b8b0a2 0%, #8a8175 45%, #55504a 100%);
  --grad-t2: linear-gradient(160deg, #d9b45f 0%, #9a7b3a 50%, #4a3a1e 100%);
  --grad-v1: linear-gradient(150deg, #ffd23f 0%, #f2a900 55%, #7a5200 100%);
  --grad-v2: linear-gradient(150deg, #3a3a3a 0%, #1a1a1a 55%, #000000 100%);
  --grad-v3: linear-gradient(150deg, #e8202a 0%, #a3131b 55%, #40070b 100%);
  --hero-glow: radial-gradient(120% 150% at 88% -30%, rgba(255, 200, 13, .18), transparent 62%);
  --thumb-streak: rgba(255, 255, 255, .5);
  --thumb-streak-2: rgba(230, 235, 220, .55);
  --thumb-streak-opacity: 1;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, sans-serif;
  --fs-meta: 11.5px;   /* chips, timestamps, labels */
  --fs-xs: 12.5px;     /* footers, secondary copy */
  --fs-sm: 13.5px;     /* nav, tabs, buttons */
  --fs-base: 14px;     /* body */
  --fs-title: 15.5px;  /* card titles, stat values */
  --fs-modal: 16.5px;  /* modal titles, section titles */
  --fs-h2: 21px;       /* panel H1 / H2 */
  /* supplementary steps derived from the same scale */
  --fs-badge: 10px;
  --fs-tiny: 11px;
  --fs-label: 12px;
  --fs-desc: 13px;
  --fs-h4: 14.5px;

  /* Spacing */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;

  /* Radius */
  --r-input: 7px;
  --r-btn: 8px;
  --r-card: 10px;
  --r-modal: 14px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-card: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, .12);
  --shadow-modal: 0 20px 50px rgba(0, 0, 0, .25);

  /* Focus — the halo must read ≥3:1 against the surface it sits on, so it is
     --accent-text (bronze, 5.53:1 on --bg / 5.93:1 on --card), NOT the pale
     --accent-soft plate a gold halo would need. Dark re-points this at
     --accent (12.06:1 on --card). */
  --ring: 0 0 0 3px var(--accent-text);

  /* Layout */
  --header-h: 60px;
  --rule: 1px;                              /* .site-header / .nav-bar hairlines */
  --nav-h: calc(var(--s2) * 2 + 44px + var(--rule)); /* nav-row: 8px pad + 44px link + rule */
  --max-w: 1440px;
  /* Detail/reading pages (publication detail) cap narrower than the 1440
     three-column homepage grid so side gutters stay visible on ordinary
     laptop screens: observed on the live detail page, which caps at 1100px
     — at the homepage's 1440 cap the gutters collapse to ~24px per side. */
  --max-w-detail: 1200px;
  --col-l: 250px;
  --col-r: 340px;
  --gap: 24px;
  /* Sticky rails pin below the ENTIRE sticky header — both rows (header-row +
     nav-row) plus its bottom rule — and below .page-layout's top margin, so
     they can never slide underneath it. Only meaningful ≥1024, where the nav
     row exists (and where the rails are visible). */
  --sticky-top: calc(var(--header-h) + var(--nav-h) + var(--rule) + var(--gap));
}

/* -----------------------------------------------------------------------------
   Dark theme — keyed to [data-theme="dark"] (an inline <head> script guarantees
   the attribute always exists, so no media query is needed and the manual
   override always wins over the OS preference).
   -------------------------------------------------------------------------- */
[data-theme="dark"] {
  color-scheme: dark;

  /* Solid gold on dark carries a BLACK --on-accent label at 12.15:1, and the
     gold itself clears 3:1 as a focus/UI border on --card (12.06:1) and on
     --accent-soft (9.14:1). The pale plates invert to a deep olive-gold so
     --accent-text (9.14:1) and --body (8.37:1) keep working on them. */
  --accent: #ffd11a;
  --accent-dark: #e6bb00;
  --accent-soft: #3a2e06;
  --accent-line: #57430d;
  /* links / icons / active text on dark surfaces (9.1:1+) */
  --accent-text: #ffd11a;
  --red: #ff5f52;           /* 5.88:1 on --card, 6.36:1 on --bg */
  --red-soft: #3a1a17;

  /* text-input boundary: 3.23:1 on --card, 3.49:1 on --bg */
  --input-border: #616a7a;

  --green: #6ee7b7;
  --green-soft: #14301f;
  --amber: #fcd34d;
  --amber-soft: #332614;

  --text: #eef0f3;
  --body: #c9cdd4;
  --muted: #9aa1ab;
  --faint: #8b929d;
  --border: #2a2f38;
  --border-strong: #3a4150;
  --bg: #0e1013;
  --card: #16191f;
  --hover: #1e222a;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .4);

  /* focus halo in dark: the bright gold fill is the visible ring here
     (see the light :root entry for why the halo never uses a pale plate) */
  --ring: 0 0 0 3px var(--accent);

  /* toast inverts: light plate, dark text */
  --scrim: rgba(0, 0, 0, .7);
  --toast-bg: var(--text);
  --toast-text: var(--bg);

  /* Decorative surfaces that cannot swap cleanly as a plain token swap. The
     reference's white "light streak" would glow against a dark page, and the
     hero's gold glow would vanish on the much lower-luminance plate, so it
     brightens from .18 to .28 alpha. These are colour values, so they live
     here rather than in dark.css, which carries component decisions. */
  --thumb-streak-opacity: .45;
  --hero-glow: radial-gradient(120% 150% at 88% -30%, rgba(255, 209, 26, .28), transparent 62%);
}