/*
 * Design tokens — the CSS mirror of DESIGN.md and the Figma variable collections
 * in `CoSi Website — Design System` (mInDKpccRPlBJTURqganaC).
 * Primitives carry values; semantic roles alias them. Components use roles only.
 * Figma modes map to CSS like this:
 *   Semantic Light/Dark   → .theme-light / .theme-dark (set on any element; everything inside follows)
 *   Primitives Desktop/Mobile → the media queries at the bottom of this file
 */

/* Ekstra, Good Type Foundry web licence (Web 15k views/month, Light, Regular, Medium; bought
   11-05). Self-hosted as delivered: the EULA forbids modifying or renaming the files, so no
   subsetting. Always the webfont (no local()), so every machine renders the licensed build.
   Light is preloaded in layout.php: it sets the Home hero. */
@font-face {
  font-family: "Ekstra";
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/Ekstra-Light.woff2") format("woff2");
}
@font-face {
  font-family: "Ekstra";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Ekstra-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Ekstra";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Ekstra-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-var.woff2") format("woff2");
}
/* Arial reshaped to Inter's metrics, so the swap to Inter moves nothing (qa-sweep #5).
   Computed from the two font files with fontTools: size-adjust = Inter/Arial advance width
   over a pangram; overrides = Inter's typo metrics / size-adjust. Recompute if Inter changes. */
@font-face {
  font-family: "Inter Fallback";
  src: local("Arial"), local("ArialMT");
  size-adjust: 107.59%;
  ascent-override: 90.04%;
  descent-override: 22.42%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Ovo";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ovo-latin-400.woff2") format("woff2");
}

:root {
  /* ---------- Primitives: colour ---------- */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-creme: #f7f4ed;
  --color-gray-900: #1c1b17;
  --color-gray-850: #1e1e1e;
  --color-gray-600: #5f5f5d;
  --color-gray-500: #8d8d8d;
  --color-gray-550: #737373; /* a11y: gray-500 is 3.3:1 on white; small metadata needs 4.5:1 */
  --color-gray-200: #ebebeb;
  --color-gray-100: #f4f4f4;
  --color-blue: #4e93ff;
  --color-blue-ink: #2667d9; /* a11y: brand blue for TEXT on light grounds — 5.2:1 on white, 4.7:1 on grey (brand blue is 3.0/2.75) */
  --color-pink: #ff0178;
  --color-bubblegum: #ffa6f9;
  --color-orange: #ff6d1b;
  --color-chartreuse: #e4f222;
  --color-green: #00ff7b;
  --color-lilac: #e2c0ff;
  --color-amber: #f7b518;
  --color-teal: #58ddd3;

  /* ---------- Primitives: type ---------- */
  --font-display: "Ekstra", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-ui: "Ekstra", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Inter", "Inter Fallback", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-serif: "Ovo", Georgia, "Times New Roman", serif;

  --fs-display-hero: 144px;
  --fs-display-1: 108px;
  --fs-display-2: 80px;
  --fs-display-3: 64px;
  --fs-display-4: 50px;
  --fs-display-5: 40px;
  --fs-display-6: 28px;
  --fs-body-xl: 28px;
  --fs-body-lg: 22px;
  --fs-body-md: 18px;
  --fs-body-sm: 15px;
  --fs-label-lg: 20px;
  --fs-label-md: 16px;
  --fs-label-sm: 14px;
  --fs-label-xs: 12px;
  --fs-serif-hero: 80px;
  --fs-serif-1: 42px;
  --fs-serif-2: 32px;
  --fs-serif-3: 24px;

  /* ---------- Primitives: space (4px grid) ---------- */
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-64: 64px;
  --space-80: 80px;
  --space-120: 120px;
  --space-160: 160px;

  /* ---------- Primitives: radius ---------- */
  --radius-sm: 8px;
  --radius-md: 20px;
  --radius-lg: 30px;
  --radius-pill: 9999px;

  /* ---------- Layout ---------- */
  --container: 1280px;
  --gutter: 48px;
  /* The recurring content column on V0.1: starts at x≈450, ~682 wide (DESIGN.md §5). */
  --col-offset: 402px;
  --col-text: 682px;
  --nav-height: 112px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 700ms;
}

/* ---------- Semantic roles: Light (default) ---------- */
:root,
.theme-light {
  --surface-page: var(--color-white);
  --surface-page-inverse: var(--color-black);
  --surface-raised: var(--color-white);
  --surface-subtle: var(--color-gray-100);
  --surface-chrome: var(--color-gray-100);
  --surface-chrome-inverse: var(--color-gray-850);
  --ink-primary: var(--color-black);
  --ink-muted: var(--color-gray-600);
  --ink-subtle: var(--color-gray-550);
  --ink-inverse: var(--color-white);
  --ink-inverse-muted: var(--color-gray-500);
  --ink-accent: var(--color-blue-ink);
  --border-default: var(--color-gray-200);
  --border-strong: var(--color-black);
  --border-inverse: var(--color-white);
  --action-primary-bg: var(--color-black);
  --action-primary-ink: var(--color-white);
  --action-accent: var(--color-blue);
}

/* ---------- Semantic roles: Dark ---------- */
/* `inverse` means "opposite of the current ground", not "dark" (DESIGN.md §3 Modes). */
.theme-dark {
  --surface-page: var(--color-black);
  --surface-page-inverse: var(--color-white);
  --surface-raised: var(--color-gray-850);
  --surface-subtle: var(--color-gray-850);
  --surface-chrome: var(--color-gray-850);
  --surface-chrome-inverse: var(--color-gray-100);
  --ink-primary: var(--color-white);
  --ink-muted: var(--color-gray-500);
  --ink-subtle: var(--color-gray-500);
  --ink-inverse: var(--color-black);
  --ink-inverse-muted: var(--color-gray-600);
  --ink-accent: var(--color-blue); /* brand blue is 6.4:1 on black */
  --border-default: var(--color-gray-850);
  --border-strong: var(--color-white);
  --border-inverse: var(--color-black);
  --action-primary-bg: var(--color-white);
  --action-primary-ink: var(--color-black);
}

/* A grey band is its own ground: same light roles, grey surface (Home intro, footer). */
.theme-subtle {
  --surface-page: var(--color-gray-100);
}

/* ---------- Primitives: Mobile mode ---------- */
@media (max-width: 1023px) {
  :root {
    --fs-display-hero: 88px;
    --fs-display-1: 72px;
    --fs-display-2: 56px;
    --fs-display-3: 48px;
    --fs-display-4: 38px;
    --fs-display-5: 32px;
    --fs-serif-hero: 60px;
    --fs-serif-1: 34px;
    --gutter: 32px;
    --col-offset: 0px;
    --space-120: 88px;
    --space-160: 112px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-display-hero: 48px;
    --fs-display-1: 40px;
    --fs-display-2: 40px;
    --fs-display-3: 32px;
    --fs-display-4: 30px;
    --fs-display-5: 26px;
    --fs-display-6: 20px;
    --fs-body-xl: 20px;
    --fs-body-lg: 18px;
    --fs-body-md: 16px;
    --fs-serif-hero: 40px;
    --fs-serif-1: 28px;
    --fs-serif-2: 22px;
    --fs-serif-3: 18px;
    --space-64: 32px;
    --space-80: 40px;
    --space-120: 56px;
    --space-160: 64px;
    --radius-lg: 20px;
    --gutter: 20px;
    --nav-height: 72px;
  }
}