/* Fluks — design tokens. Linked FIRST on every page. */

/* Inter (variable, OFL — see fonts/OFL.txt) */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* "Written offer": white paper, near-black ink, one ink-blue accent (the colour of a signature). */
  color-scheme: light;

  /* Color — primitives */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f5f5f4;
  --color-neutral-200: #dcdee1;
  --color-neutral-300: #b9bdc2;
  --color-neutral-500: #5b5f64;
  --color-neutral-900: #121212;
  --color-brand-700: #1f3fb4;
  --color-brand-800: #182f87;

  /* Color — semantic (components use THESE)
     Contrast (WCAG): text/bg 18.7 · text/surface 17.2 · muted/bg 6.4 · muted/surface 5.9 ·
     accent/bg 8.6 · accent/surface 7.9 · accent-hover/bg 11.7 · on-accent/accent 8.6.
     Border is a hairline between ruled rows, never the only boundary of a control. */
  --color-bg: var(--color-neutral-0);
  --color-surface: var(--color-neutral-50);
  --color-text: var(--color-neutral-900);
  --color-text-muted: var(--color-neutral-500);
  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-rule: var(--color-neutral-900);
  --color-accent: var(--color-brand-700);
  --color-accent-hover: var(--color-brand-800);
  --color-on-accent: var(--color-neutral-0);
  --color-focus: var(--color-brand-700);
  --color-selection: var(--color-brand-700);
  --color-on-selection: var(--color-neutral-0);

  /* Typography — five sizes: label · text · item · close · display */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: var(--font-sans);
  --fs-sm: 0.875rem;                                    /* 14 — margin labels, footer, meta */
  --fs-base: 1.0625rem;                                 /* 17 — running text, like a letter */
  --fs-md: 1.1875rem;                                   /* 19 — statements on phones */
  --fs-lg: 1.375rem;                                    /* 22 — item titles, leads */
  --fs-xl: clamp(1.625rem, 1.35rem + 1.1vw, 2rem);      /* 26–32 — closing line */
  --fs-h2: 1.5rem;                                      /* 24 — margin headings on desktop */
  --fs-display: clamp(2.25rem, 1rem + 5.4vw, 6rem);     /* 36–96 — h1 */
  --fs-numeral: clamp(5rem, 2.5rem + 10vw, 9rem);       /* 404 code */
  --lh-display: 1.02;
  --lh-numeral: 0.85;
  --lh-tight: 1.15;
  --lh-snug: 1.35;
  --lh-base: 1.6;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --ls-display: -0.035em;
  --ls-tight: -0.015em;
  --measure: 62ch;
  --measure-narrow: 44ch;
  --measure-title: 19ch;
  --measure-close: 24ch;

  /* Spacing — 4px base scale */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-section: clamp(var(--space-16), 1.5rem + 8vw, 8.5rem);

  /* Shape & depth (a document: square planes, hairlines, no shadows at rest) */
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 2px;
  --focus-offset: 3px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-pill: 999px;
  --shadow-menu: 0 8px 24px rgb(18 18 18 / 0.12);
  --target-min: 2.75rem; /* 44px touch target */
  --icon-size: 1rem;
  --logo-height: 1.75rem;
  --stamp-size: 2.5rem;
  --menu-min: 12rem;
  --z-dropdown: 20;        /* language menu's click-away layer */
  --z-dropdown-panel: 21;  /* the menu panel, above that layer */
  --press-scale: 0.97; /* buttons give way slightly when pressed */

  /* Scrollbar: thin thumb inside a wider hit area; the transparent border shrinks on hover */
  --scrollbar-size: 12px;
  --scrollbar-inset: 3px;       /* thumb 6px wide at rest */
  --scrollbar-inset-hover: 1px; /* thumb 10px wide on hover */
  --scrollbar-thumb: var(--color-neutral-300);
  --scrollbar-thumb-hover: var(--color-neutral-500);
  --scrollbar-thumb-active: var(--color-accent);

  /* Motion */
  --duration-fast: 150ms;
  --duration-press: 120ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* Layout */
  --container-max: 72rem;
  --gutter: var(--space-4);

  /* Breakpoints (reference only — media queries can't use var()):
     bp-sm 36rem · bp-md 48rem · bp-lg 64rem · bp-xl 80rem */
}

@media (min-width: 48rem) {
  :root {
    --gutter: var(--space-8);
  }
}