/* =========================================================================
   Zeetius Federation — design tokens
   =========================================================================

   Two grounds, on purpose.

   INK is the system: the console a federation secretary works inside. It
   carries the header, the hero, the engine sections and the footer.
   PAPER is the record: rankings, certificates, the public site, the
   compliance file. It carries everything a player or a ministry reads.

   The switch between them is meaning, not rhythm — it tells you whether
   you are looking at the machinery or at what the machinery produced. That
   is also why the boundary is a hard edge and never a gradient.

   Colour does not carry the composition; hairlines, tabular numerals and
   the condensed display face do. This matters because Zeetius runs as a
   white-label platform underneath: a federation's own palette can be loud,
   and a layout that only holds together in one set of colours is not
   finished.

   Every foreground/background pair below was measured, not eyeballed.
   The measured ratio is written next to it.
   ========================================================================= */

:root {
  /* --- Ink ramp -----------------------------------------------------------
     Neutrals are tinted toward the brand's own hue (oklch H 235), never
     toward the default warm grey. Chroma stays under 0.025 so the tint
     reads as "cool slate", not "blue". */
  --ink-950: #040C12;
  --ink-900: #0A151C;
  --ink-800: #142129;
  --ink-700: #223038;
  --ink-600: #37444D;
  --ink-500: #59656D;
  --ink-400: #828E96;
  --ink-300: #A8B3BA;
  --ink-200: #CDD6DB;
  --ink-100: #E3E9EC;
  --ink-050: #F1F5F7;
  --paper-000: #F9FBFD;
  --white: #FFFFFF;

  /* --- Brand ---------------------------------------------------------------
     Cyan and amber are lifted straight from the Zeetius mark. Cyan is the
     action colour. Amber is the single attention colour and appears only on
     state — a pending approval, an SLA about to expire — never as decoration.
     Each has an "-ink" variant dark enough to sit on paper: raw cyan on a
     near-white ground measures 2.7:1 and is unreadable as text. */
  --cyan: #10A6D6;
  --cyan-ink: #096F9E;
  --cyan-deep: #075C82;
  --cyan-glow: rgb(16 166 214 / 0.14);
  --amber: #F9AA33;
  --amber-ink: #8A5A00;
  --amber-glow: rgb(249 170 51 / 0.14);

  /* --- Semantic state ------------------------------------------------------
     Fixed across every tenant. No federation palette may make "rejected"
     read as approved, so these are never brand-overridable. */
  --ok: #46B86E;
  --ok-ink: #177F44;
  --stop: #E9504D;
  --stop-ink: #C0332F;
  --live: var(--cyan);

  /* --- Ground: ink --------------------------------------------------------- */
  --ink-bg: var(--ink-950);
  --ink-raised: var(--ink-900);
  --ink-panel: var(--ink-800);
  --ink-hairline: var(--ink-700);
  --ink-border: var(--ink-600);
  --ink-border-strong: var(--ink-500);   /* 3.08:1 — form controls on ink */
  --ink-fg-strong: var(--ink-050);       /* 17.9:1 */
  --ink-fg: var(--ink-100);              /* 16.1:1 */
  --ink-fg-muted: var(--ink-300);        /*  8.6:1 */
  --ink-fg-meta: var(--ink-400);         /*  5.5:1 */

  /* --- Ground: paper ------------------------------------------------------- */
  --paper-bg: var(--paper-000);
  --paper-raised: var(--ink-050);
  --paper-panel: var(--ink-100);
  --paper-hairline: var(--ink-200);
  --paper-border: var(--ink-500);        /*  5.8:1 — form controls on paper */
  --paper-fg-strong: var(--ink-900);     /* 17.8:1 */
  --paper-fg: var(--ink-800);            /* 15.8:1 */
  --paper-fg-muted: var(--ink-500);      /*  5.8:1 */

  /* --- Active ground -------------------------------------------------------
     Sections set these three, and everything downstream follows. A component
     is written once and works on either ground. */
  --bg: var(--paper-bg);
  --surface: var(--paper-raised);
  --panel: var(--paper-panel);
  --hairline: var(--paper-hairline);
  --border: var(--paper-border);
  --fg-strong: var(--paper-fg-strong);
  --fg: var(--paper-fg);
  --fg-muted: var(--paper-fg-muted);
  --accent: var(--cyan-ink);
  --accent-contrast: var(--white);
  --attention: var(--amber-ink);
  --state-ok: var(--ok-ink);
  --state-stop: var(--stop-ink);

  /* --- Type ----------------------------------------------------------------
     Barlow Condensed sets the display. A condensed grotesque is the type of
     fixture boards, race numbers and results sheets — athletic without
     costume, and it holds a long federation name at 375px without breaking.
     Barlow sets the body from the same family tree, so the pairing is a
     width contrast rather than two sans faces fighting each other.

     Arabic is not the same design at a different angle. Cairo carries the
     display and IBM Plex Sans Arabic the body, and Arabic gets ~10% more
     leading: ascenders, descenders and diacritics collide at Latin leading. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
  --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --lh-mult: 1;

  --t-xs: 0.8125rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-md: clamp(1.125rem, 0.25vw + 1.06rem, 1.25rem);
  --t-lg: clamp(1.25rem, 0.55vw + 1.13rem, 1.5rem);
  --t-xl: clamp(1.5rem, 1vw + 1.25rem, 2rem);
  --t-2xl: clamp(1.875rem, 2vw + 1.4rem, 2.75rem);
  --t-3xl: clamp(2.25rem, 3.2vw + 1.5rem, 3.75rem);
  --t-4xl: clamp(2.75rem, 5vw + 1.4rem, 5rem);

  --lh-tight: calc(0.95 * var(--lh-mult));
  --lh-display: calc(1.03 * var(--lh-mult));
  --lh-heading: calc(1.15 * var(--lh-mult));
  --lh-body: calc(1.6 * var(--lh-mult));
  --lh-loose: calc(1.75 * var(--lh-mult));

  --track-display: -0.02em;
  --track-tight: -0.01em;
  --track-wide: 0.06em;

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

  /* Sections breathe with the viewport but never collapse on a phone. Three
     rhythms, not one, so the page has a pulse instead of a metronome. */
  --band: clamp(3.5rem, 7vw, 6.5rem);
  --band-lg: clamp(5rem, 10vw, 9rem);
  --band-sm: clamp(2.5rem, 4.5vw, 4rem);
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* --- Measure ------------------------------------------------------------- */
  --w-max: 1180px;
  --w-wide: 1400px;
  --w-prose: 62ch;
  --w-narrow: 46ch;
  --header-h: 68px;

  /* --- Radius --------------------------------------------------------------
     Near-square by intent. The structural device on this site is the
     hairline, not the rounded corner, so radius stays small enough that it
     reads as a machined edge rather than a card. */
  --r-1: 2px;
  --r-2: 4px;
  --r-3: 8px;
  --r-pill: 999px;

  /* --- Motion --------------------------------------------------------------
     Exponential ease-out only. No bounce, no elastic: this is a record, not
     a game. Durations are collapsed wholesale under prefers-reduced-motion. */
  --dur-1: 140ms;
  --dur-2: 240ms;
  --dur-3: 420ms;
  --dur-4: 720ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  /* --- Layers --------------------------------------------------------------
     Named ladder. Nothing on this site reaches for 9999. */
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-header: 200;
  --z-backdrop: 300;
  --z-panel-layer: 400;
}

/* Ink sections opt in by class. Everything inside them — buttons, chips,
   tables, the artefacts — resolves through the same semantic names. */
.on-ink {
  --bg: var(--ink-bg);
  --surface: var(--ink-raised);
  --panel: var(--ink-panel);
  --hairline: var(--ink-hairline);
  --border: var(--ink-border-strong);
  --fg-strong: var(--ink-fg-strong);
  --fg: var(--ink-fg);
  --fg-muted: var(--ink-fg-muted);
  --accent: var(--cyan);
  --accent-contrast: var(--ink-950);
  --attention: var(--amber);
  --state-ok: var(--ok);
  --state-stop: var(--stop);
  color-scheme: dark;
}

.on-paper {
  --bg: var(--paper-bg);
  --surface: var(--paper-raised);
  --panel: var(--paper-panel);
  --hairline: var(--paper-hairline);
  --border: var(--paper-border);
  --fg-strong: var(--paper-fg-strong);
  --fg: var(--paper-fg);
  --fg-muted: var(--paper-fg-muted);
  --accent: var(--cyan-ink);
  --accent-contrast: var(--white);
  --attention: var(--amber-ink);
  --state-ok: var(--ok-ink);
  --state-stop: var(--stop-ink);
  color-scheme: light;
}

/* --- Type per writing system ---------------------------------------------

   One family cannot set ten languages. Each script gets a face that actually
   contains its glyphs, and — more importantly — its own leading and tracking.
   Swapping the family and keeping Latin metrics is the usual mistake, and it
   is what makes non-Latin interfaces look cramped.

   The Latin languages keep Barlow Condensed. Note what that buys: German and
   French set roughly 20–30% longer than English, and a condensed grotesque
   absorbs a good part of that before anything has to reflow. */

:root:lang(ar) {
  --font-display: 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  /* Arabic ascenders, descenders and diacritics need about 10% more room at
     the same nominal size, and there is no condensed cut to tighten. */
  --lh-mult: 1.1;
  --track-display: 0;
  --track-tight: 0;
}

:root:lang(ja) {
  --font-display: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  --font-body: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', system-ui, sans-serif;
  /* CJK sets on a square em, so it needs less leading than Latin, not more. */
  --lh-mult: 0.96;
  --track-display: 0;
  --track-tight: 0;
}

:root:lang(zh-Hans) {
  --font-display: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --font-body: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
  --lh-mult: 0.96;
  --track-display: 0;
  --track-tight: 0;
}

:root:lang(hi) {
  --font-display: 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;
  --font-body: 'Noto Sans Devanagari', 'Nirmala UI', system-ui, sans-serif;
  /* The shirorekha and the matras above and below it need the extra height. */
  --lh-mult: 1.12;
  --track-display: 0;
  --track-tight: 0;
}

/* Scripts with no condensed cut lose the width saving that lets a Latin
   headline run long, so their display sizes come down a step. */
:root:lang(ja), :root:lang(zh-Hans), :root:lang(hi), :root:lang(ar) {
  --t-3xl: clamp(1.875rem, 2.6vw + 1.25rem, 3rem);
  --t-4xl: clamp(2.125rem, 3.6vw + 1.3rem, 3.75rem);
}