/* Design tokens.
   These are static defaults that mirror data.json so the page is never unstyled
   while data.json is loading. js/core/theme.js overwrites them from data.json
   on boot — data.json wins, this file only prevents a flash of unstyled type. */

@layer tokens, base, layout, components, pages, utilities;

@layer tokens {
  :root {
    /* --- colour ------------------------------------------------------------
       primary is the identity teal and is restricted to large graphic areas.
       It measures 2.78:1 on paper, so it can never carry text.
       primary-ink is the accessible sibling used for text and interactive states. */
    --c-primary: #00a9ce;
    --c-primary-ink: #00708c;
    --c-secondary: #003f7f;
    --c-ink: #16181c;
    --c-ink-muted: #4e5560;
    --c-paper: #faf8f3;
    --c-paper-alt: #f1ede4;
    --c-white: #ffffff;
    --c-rule: #d7d1c4;
    --c-danger: #b3261e;
    --c-warning: #8a5a00;
    --c-positive: #1b5e3f;
    --c-focus: #b4530a;

    /* derived surfaces */
    --c-ink-inverse: #faf8f3;
    --c-tint-primary: color-mix(in oklab, var(--c-primary) 12%, var(--c-paper));
    --c-tint-danger: color-mix(in oklab, var(--c-danger) 10%, var(--c-paper));
    --c-tint-positive: color-mix(in oklab, var(--c-positive) 10%, var(--c-paper));
    --c-tint-warning: color-mix(in oklab, var(--c-warning) 12%, var(--c-paper));

    /* --- type -------------------------------------------------------------- */
    --f-display: "Archivo", "Franklin Gothic Medium", "Helvetica Neue", Arial, sans-serif;
    --f-body: "Newsreader", Charter, Georgia, "Times New Roman", serif;
    --f-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;

    --fs-h1: clamp(2rem, 1.583rem + 2.083vw, 3.25rem);
    --fs-h2: clamp(1.5rem, 1.25rem + 1.25vw, 2.25rem);
    --fs-h3: clamp(1.25rem, 1.167rem + 0.417vw, 1.5rem);
    --fs-body: clamp(1rem, 0.979rem + 0.104vw, 1.0625rem);
    --fs-small: 0.875rem;
    --fs-micro: 0.78125rem;

    --lh-tight: 1.08;
    --lh-head: 1.16;
    --lh-body: 1.62;
    --lh-legal: 1.7;

    --measure-legal: 68ch;
    --prose-max: 68ch;

    /* --- space: a 4px base, named after use, not after size ---------------- */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4rem;
    --s-9: 6rem;

    --container-max: 76rem;
    --gutter: 1.5rem;

    /* --- the ticket --------------------------------------------------------
       A printed retail ticket does not invert when the reader turns on dark mode,
       so these stay fixed on purpose and are not redefined in the dark block. */
    --c-ticket-paper: #ffffff;
    --c-ticket-ink: #16181c;
    --c-ticket-ink-soft: #5a5145;
    --c-ticket-tear: #c9c3b6;
    --c-ticket-rule: #d8d2c5;

    /* --- lines and edges --------------------------------------------------- */
    --r-sm: 2px;
    --r-md: 4px;
    --hairline: 1px solid var(--c-rule);
    --rule-heavy: 3px solid var(--c-ink);
    --rule-brand: 3px solid var(--c-primary);

    /* --- motion ------------------------------------------------------------ */
    --t-fast: 120ms;
    --t-base: 240ms;
    --t-slow: 520ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    --touch-min: 44px;
    --z-header: 100;
    --z-dialog: 500;

    color-scheme: light dark;
  }

  /* Dark tokens are also emitted by theme.js from data.json.brand.colors_dark.
     Kept here so a dark-mode visitor is not flashed a light page first. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --c-ink: #f3f1ec;
      --c-ink-muted: #a8aeb8;
      --c-paper: #14171b;
      --c-paper-alt: #1c2026;
      --c-rule: #333a43;
      --c-primary-ink: #4fc7e4;
      --c-secondary: #8fb4e0;
      --c-danger: #f0857c;
      --c-positive: #6fcf9a;
      --c-warning: #d9a441;
      --c-focus: #f0a04b;
      --c-ink-inverse: #14171b;
    }
  }

  :root[data-theme="dark"] {
    --c-ink: #f3f1ec;
    --c-ink-muted: #a8aeb8;
    --c-paper: #14171b;
    --c-paper-alt: #1c2026;
    --c-rule: #333a43;
    --c-primary-ink: #4fc7e4;
    --c-secondary: #8fb4e0;
    --c-danger: #f0857c;
    --c-positive: #6fcf9a;
    --c-warning: #d9a441;
    --c-focus: #f0a04b;
    --c-ink-inverse: #14171b;
  }
}

/* Self-hosted only. No Google Fonts link, no CDN, no @import of a remote sheet.
   size-adjust on the fallback keeps the swap from shifting layout. */
@layer base {
  @font-face {
    font-family: "Archivo";
    src: url("/assets/fonts/archivo-variable.woff2") format("woff2-variations");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-display: swap;
  }
  @font-face {
    font-family: "Newsreader";
    src: url("/assets/fonts/newsreader-variable.woff2") format("woff2-variations");
    font-weight: 200 800;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-weight: 400;
    font-display: swap;
  }
  @font-face {
    font-family: "IBM Plex Mono";
    src: url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");
    font-weight: 600;
    font-display: swap;
  }
}