/* =============================================================================
   STORYCATION — DESIGN TOKENS  (Static V2)
   -----------------------------------------------------------------------------
   Carried over from Astro V1 (src/styles/tokens.css) without a redesign.

   PROVISIONAL. No canonical Storycation visual identity exists yet. Every
   colour, face, and scale below is named by ROLE so the real identity can be
   dropped in HERE and nowhere else. Other stylesheets must never hard-code a
   hex value, a font stack, or a raw spacing value.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---------------------------------------------------------------------
     COLOUR ROLES  (provisional)
     Named by ROLE, never by hue, so a repaint does not require a rename.
     Palette intent: paper, kraft, ink, marker.
     --------------------------------------------------------------------- */

  --color-paper: #fbf9f5;            /* primary page ground — warm, not white */
  --color-paper-alt: #f2ede3;        /* kraft-tinted alternate band */
  --color-paper-sunk: #e9e2d4;       /* recessed wells, placeholder fills */

  --color-ink: #191816;              /* primary text — 16.9:1 on paper */
  --color-ink-muted: #5a554c;        /* secondary text — 7.0:1 on paper */
  --color-ink-faint: #8b8578;        /* metadata, non-essential only */

  --color-line: #ded7c9;             /* hairlines, dividers */
  --color-line-strong: #c4bba8;      /* emphasised rules, card edges */

  --color-accent: #b8420f;           /* marker red-orange — 5.2:1 on paper */
  --color-accent-soft: #f0d9cb;      /* accent wash */
  --color-accent-secondary: #1c4b5a; /* whiteboard blue — 9.1:1 on paper */

  --color-inverse-bg: #16150f;       /* inverted sections */
  --color-inverse-ink: #f6f2e8;      /* 16.4:1 on inverse-bg */
  --color-inverse-muted: #a8a190;
  --color-accent-on-inverse: #e8814a;/* 6.7:1 on inverse-bg */

  --color-focus: #1c4b5a;            /* keyboard focus ring */
  --color-selection: #f0d9cb;

  /* WOW! colours (D1A prototype). The marker box after the paper and ink:
     bright fills that carry ink text, plus one blue that carries paper
     text. Fills are for shapes, stickers, and bands, never for small text
     on paper. Contrast is noted for the text each fill is meant to carry. */
  --color-wow-sun: #ffd23f;          /* ink on it — 12.3:1 */
  --color-wow-sun-soft: #fff2c2;
  --color-wow-pop: #ff6b2c;          /* ink on it — 6.2:1 */
  --color-wow-sky: #1f5fd1;          /* paper on it — 5.5:1 */
  --color-wow-sky-soft: #dbe7fb;
  --color-wow-leaf: #45b97c;         /* ink on it — 7.2:1 */
  --color-wow-pink: #ff9fc0;         /* ink on it — 9.3:1 */
  --color-grid-dot: rgb(25 24 22 / 0.13);

  /* ---------------------------------------------------------------------
     TYPEFACES  (provisional)
     No external font is approved. These are system stacks so the site is
     fast and dependency-free today, and so a licensed identity face can be
     dropped into a single custom property later.
     --------------------------------------------------------------------- */

  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
    "Book Antiqua", Georgia, ui-serif, serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  /* Reserved for the handwritten / marker annotation treatment. Currently
     the body face in italic; a real hand face is a candidate for the
     eventual identity system. */
  --font-annotation: var(--font-body);
  /* The WOW! voice: a heavy, condensed sans from faces already on the
     device. Avenir Next Condensed ships with Apple systems; the rest are
     fallbacks with the same posture. Still no external font. */
  --font-wow: "Avenir Next Condensed", "Avenir Next", "Helvetica Neue",
    "Arial Narrow", "Roboto Condensed", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    monospace;

  /* ---------------------------------------------------------------------
     TYPE SCALE — fluid, viewport-responsive
     Type should not merely shrink on mobile; it should re-proportion.
     --------------------------------------------------------------------- */

  --type-display-xl: clamp(2.75rem, 1.85rem + 4.2vw, 5.5rem);
  --type-display: clamp(2.25rem, 1.65rem + 2.8vw, 4rem);
  --type-h1: clamp(2rem, 1.65rem + 1.7vw, 3rem);
  --type-h2: clamp(1.5rem, 1.32rem + 0.9vw, 2.125rem);
  --type-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.4375rem);
  --type-body-lg: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --type-body: clamp(1.0625rem, 1.03rem + 0.18vw, 1.1875rem);
  --type-small: 0.9375rem;
  --type-label: 0.75rem;

  --leading-tight: 1.06;
  --leading-snug: 1.2;
  --leading-normal: 1.4;
  --leading-relaxed: 1.62;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-label: 0.09em;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---------------------------------------------------------------------
     SPACE SCALE
     --------------------------------------------------------------------- */

  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* ---------------------------------------------------------------------
     LAYOUT
     Three deliberate measures: reading, wide, full-editorial.
     --------------------------------------------------------------------- */

  --width-reading: 38rem;   /* long-form prose — ~68 characters */
  --width-wide: 68rem;      /* cards, grids, mixed content */
  --width-full: 88rem;      /* full-bleed editorial compositions */

  --gutter: clamp(1.25rem, 1rem + 2.2vw, 3.5rem);

  /* Vertical rhythm between major page sections. */
  --section-rhythm: clamp(3.5rem, 2.5rem + 5vw, 8rem);
  --section-rhythm-tight: clamp(2.25rem, 1.75rem + 2.6vw, 4.5rem);

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --border-hairline: 1px;
  --border-medium: 2px;
  --border-heavy: 3px;

  /* Image aspect conventions — keeps the archive visually coherent
     as real photography of wildly different origins arrives. */
  --aspect-hero: 16 / 9;
  --aspect-editorial: 3 / 2;
  /* 4:3 — the native aspect of most phone photography in the archive.
     Used where cropping a real photograph would lose the subject. */
  --aspect-classic: 4 / 3;
  --aspect-portrait: 4 / 5;
  --aspect-square: 1 / 1;
  --aspect-panorama: 21 / 9;

  /* ---------------------------------------------------------------------
     MOTION — restrained by default.
     --------------------------------------------------------------------- */

  --motion-fast: 120ms;
  --motion-base: 220ms;
  --motion-slow: 420ms;
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --shadow-subtle: 0 1px 2px rgb(25 24 22 / 0.05),
    0 6px 18px -12px rgb(25 24 22 / 0.18);
  /* A hard offset shadow: the cut-paper, sticker edge of WOW!. */
  --shadow-block: 4px 4px 0 var(--color-ink);
  --shadow-block-lg: 7px 7px 0 var(--color-ink);
  --type-wow-hero: clamp(5.5rem, 2rem + 17vw, 16rem);
}

/* Anyone who has asked their system to calm down gets a calm site. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
  }
}