/* ==========================================================================
   tokens.css — the design system.

   A conventional academic/institutional layout — top nav, hero, sidebar,
   card grids — built clean: real spacing, flat SVG icons, soft warm shadows
   instead of 3D clip-art and heavy borders. Palette stays a single warm
   family: light cream grounds, brown ink, orange accents. No neutral grey,
   no pure black, no cool colour anywhere in the system.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ── Ground: light cream ────────────────────────────────────────────
     Cream surfaces differing only slightly, so panels read as paper
     stacked on paper rather than coloured blocks. */
  --cream: #fbf4e3;
  --cream-deep: #f8efd9;
  --sand: #f5ead0;
  --surface: #fffdf7;
  --surface-alt: #fff9ec;

  /* ── Ink: brown, never black ────────────────────────────────────────
     Four tiers of brown. Measured against --cream and --surface:
       strong 13.0:1 · body 9.0:1 · mute 6.6:1 · faint 5.2:1 */
  --ink: #3a2616;
  --ink-soft: #5a3d22;
  --ink-mute: #6f5334;
  --ink-faint: #7e6244;

  /* ── Hues ────────────────────────────────────────────────────────────
     Six warm colours — oranges through browns — one per subject area. All
     are dark enough to carry cream text at ≥4.5:1. Colour encodes the
     taxonomy: a card, its icon and its badge all take the hue of what
     they contain. */
  --hue-admin: #8a4a22;
  --hue-emanagement: #a05a15;
  --hue-strategies: #b34e16;
  --hue-assessment: #8f6a12;
  --hue-research: #b03e18;
  --hue-hr: #7b3b28;

  --vermillion: #b03e18;

  /* Headlines and links. Orange, held at the value that still clears 3:1
     on cream at display size / 4.5:1 for normal-size UI text below. */
  --headline: #c25a1b;
  --link: #a8460f;

  /* ── Semantic ───────────────────────────────────────────────────────── */
  --bg: var(--cream);
  --bg-alt: var(--cream-deep);

  --fg: var(--ink-soft);
  --fg-strong: var(--ink);
  --fg-mute: var(--ink-mute);
  --fg-faint: var(--ink-faint);
  --fg-invert: var(--cream);

  /* Overridden per element by [data-hue] below. */
  --accent: var(--vermillion);

  --border: color-mix(in srgb, var(--ink) 14%, transparent);
  --border-soft: color-mix(in srgb, var(--ink) 8%, transparent);
  --border-strong: color-mix(in srgb, var(--ink) 30%, transparent);

  --paper-bright: var(--surface);

  /* Text over a photo/scrim — always light, never theme-dependent. */
  --on-scrim: #faf6ec;

  --focus: var(--accent);

  /* ── Type ────────────────────────────────────────────────────────────
     Amiri (a book-trade Naskh revival) for headings and reading; IBM Plex
     Sans Arabic for interface chrome; a mono stack for small numeric meta. */
  --font-read: "Amiri", "Iowan Old Style", Georgia, serif;
  --font-ui: "IBM Plex Sans Arabic", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  --fs-3xs: clamp(0.688rem, 0.665rem + 0.1vw, 0.75rem);
  --fs-2xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.8125rem);
  --fs-xs: clamp(0.8125rem, 0.78rem + 0.14vw, 0.875rem);
  --fs-sm: clamp(0.875rem, 0.84rem + 0.16vw, 0.9375rem);
  --fs-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
  --fs-md: clamp(1.0625rem, 1rem + 0.28vw, 1.1875rem);
  --fs-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);
  --fs-xl: clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
  --fs-2xl: clamp(2rem, 1.6rem + 1.8vw, 2.875rem);

  --lh-tight: 1.16;
  --lh-snug: 1.32;
  --lh-normal: 1.55;
  --lh-read: 1.85;

  --track-tight: -0.01em;
  --track-wide: 0.06em;
  --track-widest: 0.16em;

  /* ── Space ──────────────────────────────────────────────────────────── */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.75rem;
  --sp-8: 3.5rem;
  --sp-9: 5rem;

  --section-y: clamp(3.5rem, 6vw, 6rem);
  --gutter: clamp(1rem, 4vw, 3rem);
  --measure: 66ch;

  --wide: 90rem;
  --mid: 72rem;
  --narrow: 42rem;
  --sidebar-w: 20rem;

  --nav-h: 4.5rem;
  --ticker-h: 2.375rem;

  /* ── Radius & elevation ────────────────────────────────────────────────
     A conventional, friendly surface language: soft corners, warm-tinted
     shadows instead of neutral-grey ones. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  --sh-1: 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  --sh-2: 0 2px 8px color-mix(in srgb, var(--ink) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--ink) 6%, transparent);
  --sh-3: 0 12px 28px color-mix(in srgb, var(--ink) 16%, transparent),
    0 2px 6px color-mix(in srgb, var(--ink) 8%, transparent);

  /* ── Motion ─────────────────────────────────────────────────────────── */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.4, 0.64, 1);

  --d-1: 160ms;
  --d-2: 260ms;
  --d-3: 420ms;
  --d-4: 640ms;

  /* ── Direction ──────────────────────────────────────────────────────── */
  --flow-start: -1;
  --flow-origin: right;
  --flow-to-start: right;
  --flow-to-end: left;
  --flow-scale: -1;
  /* Sign the carousel translates by. RTL stacks later slides to the left,
     so advancing is a positive translation. */
  --carousel-dir: 1;

  /* ── Layers ─────────────────────────────────────────────────────────── */
  --z-sticky: 10;
  --z-nav: 100;
  --z-drawer: 200;
  --z-lightbox: 300;
}

/* ── Hue scoping ──────────────────────────────────────────────────────────
   Setting --accent on a card/badge cascades to its icon circle, its badge
   text and its hover rule. One attribute, whole-element recolouring. */
[data-hue="admin"] { --accent: var(--hue-admin); }
[data-hue="emanagement"] { --accent: var(--hue-emanagement); }
[data-hue="strategies"] { --accent: var(--hue-strategies); }
[data-hue="assessment"] { --accent: var(--hue-assessment); }
[data-hue="research"] { --accent: var(--hue-research); }
[data-hue="hr"] { --accent: var(--hue-hr); }
[data-hue="all"] { --accent: var(--vermillion); }

/* LTR is the secondary locale — mirror the direction tokens. */
[dir="ltr"] {
  --flow-start: 1;
  --flow-origin: left;
  --flow-to-start: left;
  --flow-to-end: right;
  --flow-scale: 1;
  --carousel-dir: -1;
}

/* ── Inverted theme ───────────────────────────────────────────────────────
   The same page printed on dark roast instead of cream. Still no neutrals:
   the ground is a deep brown and the hues lift to tans and warm oranges. */
[data-theme="dark"] {
  color-scheme: dark;

  --bg: #1b1209;
  --bg-alt: #241809;
  --surface: #241809;
  --surface-alt: #2c1e0d;

  --fg: color-mix(in srgb, #fbf4e3 80%, transparent);
  --fg-strong: #fbf4e3;
  --fg-mute: color-mix(in srgb, #fbf4e3 60%, transparent);
  --fg-faint: color-mix(in srgb, #fbf4e3 44%, transparent);
  --fg-invert: var(--ink);

  --hue-admin: #d99a63;
  --hue-emanagement: #dda05c;
  --hue-strategies: #ef8a4e;
  --hue-assessment: #d7b25a;
  --hue-research: #e8703f;
  --hue-hr: #c98a70;
  --vermillion: #e8703f;
  --headline: #ef8a4e;
  --link: #ef8a4e;

  --paper-bright: #1b1209;

  --border: color-mix(in srgb, #fbf4e3 18%, transparent);
  --border-soft: color-mix(in srgb, #fbf4e3 10%, transparent);
  --border-strong: color-mix(in srgb, #fbf4e3 32%, transparent);

  --sh-1: 0 1px 2px rgb(0 0 0 / 0.3);
  --sh-2: 0 2px 8px rgb(0 0 0 / 0.34), 0 1px 2px rgb(0 0 0 / 0.24);
  --sh-3: 0 16px 32px rgb(0 0 0 / 0.44), 0 2px 6px rgb(0 0 0 / 0.3);
}