/*
 * Design tokens (ADR-015) -- «پیام تاریخ» dark forest-and-jade theme.
 *
 * Every visual value the templates use lives here as a custom property. Page templates bind data
 * and never carry styling values, so re-theming means replacing this file -- not touching a single
 * .cshtml. That separation is the point.
 *
 * The file is in two layers, and the split is what makes the promise above true:
 *
 *   §1 PRIMITIVES -- the literal hex ramps and raw scales from the design system. Named after what
 *      they *are* (green-500, space-4). Nothing outside this file should reference them.
 *   §2 SEMANTICS  -- named after what they are *for* (--color-accent, --measure-reading). site.css
 *      consumes only these, so a second theme means supplying a different §1 and remapping §2,
 *      with no stylesheet or template edits anywhere else.
 *
 * RTL is structural, not an override: the stylesheet uses logical properties throughout
 * (margin-inline-start, padding-block, border-inline-end) and never physical left/right. An
 * eventual LTR variant flips --direction and nothing else.
 *
 * Dark only, deliberately. The design system's arguments are built on a dark canvas -- elevation
 * reads through surface lightness rather than shadow, because shadows barely register here, and
 * every contrast ratio in its accessibility table is computed against #0d1512. A light variant
 * would not be that palette inverted; it would be a separate design.
 */

:root {
  /* ================================================================
   * §1 PRIMITIVES
   * ================================================================ */

  /* ---- backgrounds & surfaces ----
   * Elevation steps up in lightness, not shadow depth. */
  --bg-canvas: #0d1512;        /* page background: near-black, green-tinted, never pure #000 */
  --bg-surface: #131f1a;       /* cards, panels, nav bar */
  --bg-surface-raised: #1a2b24;/* hover states, popovers, assistant chat bubble */
  --bg-sunken: #0a100d;        /* inputs, the reserved audio well -- recessed surfaces */

  /* ---- green accent ramp ----
   * Five steps, one hue family, near-black pine through bright mint. */
  --green-900: #163326;        /* chip fills at rest, subtle section tints */
  --green-700: #1f5c3f;        /* selected chip, hover borders, user chat bubble */
  --green-500: #2f9e6b;        /* primary buttons, links, icons -- the core action colour */
  --green-400: #4dc98a;        /* hover state of primary actions */
  --green-300: #8be6b8;        /* focus rings, active nav underline, mint highlights */

  /* ---- turquoise ----
   * Reserved for citations and quotations, never brand chrome. Its presence is what tells a reader
   * "this is sourced material"; spending it on ordinary UI would destroy that signal. */
  --turq-600: #1b6b6a;         /* quote-block tint / accent-bar base */
  --turq-500: #2c8f8c;         /* quotation accent bar */
  --turq-400: #4fd1c9;         /* "back to text" links, citation chips, source references */

  /* ---- text ---- */
  --ink-primary: #eef5f1;
  --ink-secondary: #b7c8bf;
  --ink-muted: #7f9389;
  --ink-faint: #55665d;
  --ink-on-accent: #08150f;    /* on bright green-500 fills */

  /* ---- borders ---- */
  --line-subtle: #22332b;
  --line-default: #2d4239;
  --line-strong: #3d5b4d;

  /* ---- semantic hues ---- */
  --amber: #d9a84e;            /* missing-source footnote badge only */
  --red: #e2665c;              /* form errors, 500-level failures */

  /* ---- typeface families ----
   * One family carries UI, body and headings: Vazirmatn is large and mature enough that splitting
   * fonts would add inconsistency without benefit. Arabic scripture gets its own face because it
   * needs harakat support Vazirmatn does not prioritise. */
  --family-fa: "Vazirmatn", "IRANSans", "Tahoma", "Segoe UI", system-ui, sans-serif;
  --family-ar: "Noto Naskh Arabic", "Traditional Arabic", "Amiri", serif;
  --family-mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, monospace;

  /* ---- type scale ----
   * Root is 18px (html { font-size: 112.5% } in site.css), not the usual 16px: Persian reading
   * comfort benefits from a larger base, and the design system sizes the whole scale against it.
   * Values stay in rem rather than px so a reader who raises their browser's font size still gets
   * a larger page -- the odd-looking fractions are 18px multiples, noted alongside each. */
  --size-display: 2.444rem;    /* 44px -- story titles, home hero */
  --size-h1: 2rem;             /* 36px */
  --size-h2: 1.556rem;         /* 28px */
  --size-h3: 1.222rem;         /* 22px */
  --size-prose: 1.111rem;      /* 20px -- reading column body */
  --size-quote: 1.222rem;      /* 22px -- Arabic quotation */
  --size-base: 0.889rem;       /* 16px -- UI default */
  --size-sm: 0.778rem;         /* 14px -- meta, captions */
  --size-xs: 0.667rem;         /* 12px -- chip labels */

  /* Persian script needs more leading than Latin: ascenders, descenders and diacritics collide at
     the line heights that suit Latin text. Harakat need more room still. */
  --lh-prose: 2;
  --lh-quote: 2.2;
  --lh-ui: 1.6;
  --lh-tight: 1.45;
  --lh-heading: 1.3;

  /* ---- spacing ----
   * A single 4px-based scale drives micro spacing (chip padding) and macro layout (section gaps).
   * In px, not rem: these are layout gutters, and they should not grow with a reader's text size. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ---- radius ---- */
  --radius-sm: 6px;            /* inputs, small controls */
  --radius-md: 10px;           /* cards, buttons */
  --radius-lg: 16px;           /* panels, modals */
  --radius-pill: 999px;        /* chips, tags */

  /* ================================================================
   * §2 SEMANTICS -- the only names site.css is allowed to use
   * ================================================================ */

  /* ---- direction ---- */
  --direction: rtl;

  /* ---- surfaces ---- */
  --color-canvas: var(--bg-canvas);
  --color-surface: var(--bg-surface);
  --color-surface-raised: var(--bg-surface-raised);
  --color-surface-sunken: var(--bg-sunken);

  /* ---- text ---- */
  --color-text: var(--ink-primary);
  --color-text-secondary: var(--ink-secondary);
  --color-text-muted: var(--ink-muted);
  --color-text-faint: var(--ink-faint);
  --color-text-on-accent: var(--ink-on-accent);

  /* ---- borders ---- */
  --color-border-subtle: var(--line-subtle);
  --color-border: var(--line-default);
  --color-border-strong: var(--line-strong);

  /* ---- action ---- */
  --color-accent: var(--green-500);
  --color-accent-hover: var(--green-400);
  --color-accent-strong: var(--green-700);   /* selected chip fill, user chat bubble */
  --color-accent-soft: var(--green-900);     /* chip fill at rest, section tints */
  --color-accent-bright: var(--green-300);   /* active nav, mint highlights, footnote numerals */
  --color-focus: var(--green-300);

  /* ---- sourced material ---- */
  --color-citation: var(--turq-400);
  --color-citation-bar: var(--turq-500);
  --color-quote-bg: color-mix(in oklab, var(--turq-600) 16%, var(--bg-surface));
  --color-citation-chip-bg: color-mix(in oklab, var(--turq-600) 30%, var(--bg-surface));
  --color-verse-bg: var(--bg-surface);

  /* ---- status ---- */
  --color-warning: var(--amber);
  --color-warning-text: #241a06;             /* on an amber fill */
  --color-error: var(--red);

  /* ---- type ---- */
  --font-body: var(--family-fa);
  --font-quote: var(--family-ar);
  --font-mono: var(--family-mono);

  --text-display: var(--size-display);
  --text-2xl: var(--size-h1);
  --text-xl: var(--size-h2);
  --text-lg: var(--size-h3);
  --text-prose: var(--size-prose);
  --text-quote: var(--size-quote);
  --text-base: var(--size-base);
  --text-sm: var(--size-sm);
  --text-xs: var(--size-xs);

  --leading-prose: var(--lh-prose);
  --leading-quote: var(--lh-quote);
  --leading-ui: var(--lh-ui);
  --leading-tight: var(--lh-tight);
  --leading-heading: var(--lh-heading);

  /* ---- layout ----
   * Three containers: a narrow column everything readable sits in, a slightly wider one for the
   * conversation, and a wide one for chrome, listings and facet grids. */
  --measure-reading: 60ch;     /* ~608px -- story prose, poetry, quotations */
  --measure-chat: 42rem;       /* ~760px -- the conversation column, per the design kit's chat screen.
                                  Wider than the reading measure because a chat column carries two
                                  indented bubbles rather than one full-width block of prose. */
  --measure-wide: 1280px;      /* header, footer, listings, browse grids */

  /* ---- focus ----
   * Deliberately lighter than any green used as a fill, so the ring never blends into a selected
   * or active state. */
  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;
}