/*
 * Stylesheets of the magazine site, in cascade-layer order (later layers win, whatever the specificity):
 *
 *   tokens.css      fonts and design tokens (this file)
 *   base.css        element defaults, focus, buttons, utilities
 *   layout.css      site header and footer, library shelf, error page
 *   page.css        Lees & doe: the HTML magazine page and its editorial modules     (layer components)
 *   activities.css  Lees & doe: quiz, puzzles, models, notes                          (layer components)
 *   themes.css      audience styling of the components (adult magazines)               (layer components)
 *   brand.css       Lees & doe components by configuration: role faces, departments, callout styles,
 *                   workspaces, drop caps, pull quotes, the rendered cover and decor slots  (layer components)
 *   reader.css      the reader: bar, book, navigation, dialogs, zoom
 *   print.css       browser printing: one A4 preview per sheet
 *
 * Palette: Pages/Shared/_Layout.cshtml writes the magazine palette from Content/magazines.json as inline
 * custom properties on <body> (--ink, --green = primary, --lime = accent, --paper, --bg). Derived tones
 * below are computed from them with color-mix, so every magazine gets its own.
 */
@layer tokens, base, layout, components, reader, print;

@layer tokens {
  /*
   * Web fonts = Content/typefaces.json → webFonts (variable WOFF2 subsets made by tools/make_fonts.py). Declaring a
   * face costs nothing: a browser downloads a file only when a rendered element uses that family and style, so the
   * VONK faces never load on a WONDER page. Which face a role uses comes from the magazine typography (the
   * --font-<role> variables on <body>, Models/MagazineDesign.cs), the same table print uses.
   */
  @font-face {
    font-family: Bricolage;
    src: url('/fonts/bricolage.woff2') format('woff2');
    font-weight: 600 800;
    font-stretch: 75% 100%;
    font-display: swap;
  }
  @font-face {
    font-family: DM;
    src: url('/fonts/dm-sans.woff2') format('woff2');
    font-weight: 100 1000;
    font-display: swap;
  }
  /* The same file under its full name, for the documented fallback stacks ("DM Sans", system-ui, sans-serif). */
  @font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans.woff2') format('woff2');
    font-weight: 100 1000;
    font-display: swap;
  }
  /* VONK: rounded display (titles, labels, masthead at width 120 %). */
  @font-face {
    font-family: Fredoka;
    src: url('/fonts/fredoka.woff2') format('woff2');
    font-weight: 600 700;
    font-stretch: 75% 120%;
    font-display: swap;
  }
  /* Children's magazines: handwritten notes, labels and kickers (never below 1.5rem, never more than 12 words). */
  @font-face {
    font-family: Caveat;
    src: url('/fonts/caveat.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
  }
  /* VECTOR feature voice and the stories of the children's magazines (reading size, opsz 12). */
  @font-face {
    font-family: Newsreader;
    src: url('/fonts/newsreader.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: Newsreader;
    src: url('/fonts/newsreader-italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
  }
  /* VECTOR headlines and decks: the display cut at exactly the print locations (opsz 72 / 36). */
  @font-face {
    font-family: 'Newsreader Display';
    src: url('/fonts/newsreader-display.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Newsreader Display';
    src: url('/fonts/newsreader-display-italic.woff2') format('woff2');
    font-weight: 450;
    font-style: italic;
    font-display: swap;
  }
  /*
   * Greek letters, primes, super- and subscripts (Eₖ, 10⁻³), angle brackets (⟨ψ⟩): DM Sans and Bricolage lack
   * them and Arial lacks some (ₖ), so VECTOR's formulas mixed in serif glyphs. A small DejaVu Sans subset
   * (tools/fonts/DejaVuSans.ttf, licence in wwwroot/fonts/LICENSE-DejaVu.txt) fills exactly these ranges and
   * is only downloaded by pages that use them.
   */
  @font-face {
    font-family: MathFallback;
    src: url('/fonts/math-fallback.woff2') format('woff2');
    unicode-range: U+0370-03FF, U+2032-2034, U+2070-209F, U+1D40-1D7F, U+27E8-27E9, U+2C7C;
    font-display: swap;
  }

  :root {
    --ink: #182f2a;
    --green: #173f34;
    --lime: #dbf47e;
    --paper: #fffef9;
    --bg: #f2f3eb;
    --line: #d8ded2;
    --display: Bricolage, MathFallback, Arial, sans-serif;
    --body: DM, MathFallback, Arial, sans-serif;
    --focus: #b84a10;

    /*
     * Decor palette defaults (design-defaults.json → decor.palette); a magazine's own palette arrives as the same
     * variables on <body> (DecorSettings.ToCssVariables). The play colours are text-safe (≥ 4.5:1 with white).
     */
    --play-1: #1b78c2;
    --play-2: #d6333f;
    --play-3: #23845a;
    --play-4: #7b4bc4;
    --play-5: #c4410c;
    --tape-1: #ffd8e6;
    --tape-2: #c5f6fa;
    --tape-3: #fff3bf;
    --tape-4: #d3f9d8;
    --sun-body: #ffce54;
    --sun-rays: #ff922b;
    --sun-cheek: #ff8fab;
    --sun-ink: #64317d;
    --sparkle: #dbf47e;
    --grid: #d6e3ef;
    --mark-color: #ffe08a;

    /* Fixed component colours of the interior spec (§4.2–4.4): the same values as the print components. */
    --tab-magenta: #c2185b;
    --star-yellow: #ffce54;
    --star-ink: #64317d;
    --sky-tint: #e0f2fe;
    --sky-ink: #075985;
    --sticky: #fff3bf;
    --sticky-ink: #7b4a10;
    --ruled: #efe6d8;
    --margin-pink: #f4a7b9;
    --sheet-line: #d9cfe3;
    --sheet-rule: #e7dcef;
    --film: #30243c;
    --wow: #eb7650;
    --kraft: #f6ebdd;
    --blueprint: #e6f0fb;
    --blueprint-ink: #0369a1;
    --sign-bar: #e4572e;
    --sign-ink: #a3330f;
    --sign-tint: #fff0e6;
  }

  body {
    /*
     * Derived from the magazine palette on <body> (Content/magazines.json), so every magazine gets its own tones.
     * --muted is small secondary text (≥ 4.5:1 on --paper and --bg), --line/--rule are hairlines, --surface a
     * quiet box, --tint a light accent wash, --shade a shadow; --on-accent is text on the accent colour.
     */
    --muted: color-mix(in srgb, var(--ink) 80%, var(--paper));
    --rule: color-mix(in srgb, var(--ink) 16%, var(--paper));
    --line: color-mix(in srgb, var(--ink) 14%, var(--paper));
    --surface: color-mix(in srgb, var(--bg) 60%, var(--paper));
    --tint: color-mix(in srgb, var(--lime) 30%, var(--paper));
    --shade: color-mix(in srgb, var(--ink) 22%, transparent);
    --on-accent: var(--green);
    /* Status colours carry a meaning (safety, wrong answer, right answer) and are the same in every magazine. */
    --warn: #b23c0b;
    --warn-tint: #fff0e2;
    --ok: #166534;
    --ok-tint: #e6f4ea;
  }

  .magazine-adult {
    --display: DM, MathFallback, Arial, sans-serif;
  }
}