/* =========================================================================
   KVITTO — tokens.css
   The design system, frozen. Every component consumes these variables.
   NEVER hard-code a colour or size elsewhere — reach for a token.

   Palette = the POSTER palette only (warm paper, ink, one signal blue).
   Do NOT introduce the device-UI colours (near-black + burnt orange) here.
   ========================================================================= */

/* ---- Self-hosted fonts (latin subset, variable woff2) ---------------------
   Familjen Grotesk ships as one variable file per style covering the weight
   range, so 400/500/600 all resolve from a single upright file.             */

@font-face {
  font-family: 'Familjen Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-upright.woff2') format('woff2');
}
@font-face {
  font-family: 'Familjen Grotesk';
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/familjen-grotesk-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/ibm-plex-mono.woff2') format('woff2');
}

:root {
  /* ---- 2.1 Colour — poster palette, cream-forward --------------------- */
  --paper:      #EDE9DF;   /* page background — WARM LINEN CREAM (the whole site) */
  --paper-dim:  #E7E2D6;   /* whisper-soft alternate band, a hair deeper   */
  --paper-raised: #F9F7F2; /* receipts & lifted cards — the freshest paper */
  --ink:        #1D1E20;   /* primary text, headlines                     */
  --graphite:   #5D5A53;   /* secondary text, captions, mono meta (warm, AA on cream) */
  --signal:     #2B3B54;   /* THE accent — deep blue. links, key words, CTA */
  --signal-ink: #F9F7F2;   /* text on signal-filled buttons               */
  --hairline:   #DBD5C8;   /* 1px rules, dividers, receipt frames (warm)   */

  /* Soft "highlighter" wash — a pale beachy blue for marking key words.
     Pre-mixed so it renders identically everywhere. */
  --highlight:  #DCE4EC;   /* pale sky wash behind emphasised words        */

  /* Derived states (kept inside the palette — no new hues) */
  --signal-hover: #223047; /* CTA hover, ~8% darker than --signal          */
  --ok:           #2B3B54; /* form success — leans on signal, not green    */
  --err:          #8A4B4B; /* form error — muted, desaturated, never loud  */

  /* ---- 2.2 Typography -------------------------------------------------- */
  --display: 'Familjen Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* Fluid type scale (clamp min / preferred / max) */
  --fs-hero:    clamp(44px, 9vw, 84px);
  --fs-section: clamp(34px, 6vw, 60px);
  --fs-lead:    clamp(18px, 2.2vw, 22px);
  --fs-body:    17px;
  --fs-caption: 12px;
  --fs-eyebrow: 11px;
  --fs-nav:     14px;
  --fs-button:  15px;

  --lh-hero:    1.0;
  --lh-section: 1.03;
  --lh-lead:    1.5;
  --lh-body:    1.6;

  --ls-tight:   -0.02em;  /* headlines            */
  --ls-caption:  0.12em;  /* mono captions        */
  --ls-eyebrow:  0.18em;  /* mono eyebrow labels  */
  --ls-mark:     0.30em;  /* KVITTO wordmark      */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;

  /* ---- 2.3 Spacing — 8px base ----------------------------------------- */
  --s-1:  8px;
  --s-2:  16px;
  --s-3:  24px;
  --s-4:  32px;
  --s-5:  40px;
  --s-6:  48px;
  --s-8:  64px;
  --s-10: 80px;

  --section-y: clamp(80px, 14vh, 180px); /* generous vertical section rhythm */
  --gutter:    clamp(24px, 6vw, 80px);   /* page left/right gutters          */
  --container: 1120px;                   /* max content width                */
  --measure:   640px;                    /* readable text-column cap         */

  /* ---- Radii — machined, not bubbly ----------------------------------- */
  --radius-cta: 3px;
  --radius-box: 4px;

  /* ---- Shadow — the poster drop shadow --------------------------------- */
  --shadow-receipt: 0 30px 60px -28px rgba(0, 0, 0, 0.35);

  /* ---- Motion ---------------------------------------------------------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --reveal-dur: 600ms;
  --ui-dur: 160ms;

  /* ---- Layering -------------------------------------------------------- */
  --z-header: 100;
}