/*
  FRANK design tokens. v1.0, locked 19 October 2026 (decisions approved by Darren).
  Loaded on every page before site.css (tools/build.py). The rules are in design-system/DESIGN.md.

  Rules:
  - Every colour, size, duration and easing in src/*.css should come from this file.
  - Pages and components use the semantic tokens (section 2), never the raw scale (section 1).
  - The legacy aliases (section 6) keep today's variable names working during migration.
    Delete them once every stylesheet uses the new names.
*/

:root {
  /* ─────────────────────────────────────────────
     1. RAW SCALE. Do not use these directly in components.
     ───────────────────────────────────────────── */

  /* Ink: the black world */
  --ink-1000: #080808;  /* page black (current --black) */
  --ink-900:  #0d0d0d;  /* mobile menu, deep panels (replaces #090909, #0b0b0b) */
  --ink-800:  #161616;  /* media placeholders, cards (replaces #111, #121212, #171717) */
  --ink-700:  #2e2e2e;  /* hairlines on black (current --line; replaces #333) */
  --ink-600:  #555555;  /* secondary type on the light surface (replaces #3d3d3d–#494949) */
  --ink-550:  #666666;  /* muted type on the light surface, dim borders */
  --ink-500:  #777777;  /* outline borders, disabled (replaces #888) */

  /* Bone: the white world */
  --bone-100: #fdfdfe;  /* type on black, filled buttons (current --paper) */
  --bone-200: #efefef;  /* "comic page" light surface (matches the Frank axe artwork) */
  --bone-300: #e6e6e6;  /* secondary type over imagery (replaces #ddd, #dedede, #d5d5d5, #d0d0d0) */
  --bone-400: #bbbbbb;  /* secondary type, 10.4:1 on ink-1000 (replaces #bcbcbc, #c2c2c2, #b8b8b8, #b4b4b4, #b9b9b9) */
  --bone-500: #aaaaaa;  /* muted type, meta, 8.6:1 on ink-1000 (replaces #a3a3a3, #a5a5a5, #999) */
  --bone-hover: #d8d8d8;/* filled-button hover only */

  /* Blood: the only colour */
  --blood-500: #e00110; /* the FRANK red */
  --blood-400: #ff2332; /* lit red: small red type on black and glows only */

  /* ─────────────────────────────────────────────
     2. SEMANTIC COLOUR. Components use these.
     ───────────────────────────────────────────── */

  /* Dark surface (default) */
  --surface:          var(--ink-1000);
  --surface-raised:   var(--ink-800);
  --surface-sunken:   var(--ink-900);
  --text:             var(--bone-100);
  --text-secondary:   var(--bone-400);
  --text-muted:       var(--bone-500);
  --text-on-media:    var(--bone-300);
  --line:             var(--ink-700);
  --line-strong:      var(--ink-500);
  --line-on-media:    #ffffff30;

  /* Accent */
  --accent:           var(--blood-500); /* rules, dashes, active marks, display-size words */
  --accent-text:      var(--blood-400); /* red text under 24px on black (meets 4.5:1) */
  --on-accent:        var(--bone-100);
  --selection-bg:     var(--blood-500);
  --selection-text:   var(--bone-100);
  --focus-ring:       var(--bone-100);

  /* Scrims: gradients over film and artwork */
  --scrim-soft:   #08080844;
  --scrim-mid:    #08080899;
  --scrim-strong: #080808e8;
  --scrim-modal:  #000000dd;

  /* ─────────────────────────────────────────────
     3. TYPE
     ───────────────────────────────────────────── */

  --font-display: 'Barlow Condensed', Impact, sans-serif; /* headlines, uppercase only */
  --font-body:    Inter, Arial, sans-serif;               /* reading text, CTAs */
  --font-mono:    'IBM Plex Mono', monospace;             /* labels, meta, data */
  --font-hand:    'FRANK Hand', 'Bradley Hand', cursive; /* Frank's handwritten asides only */

  /* Display scale: uppercase Barlow Condensed 700 */
  --type-hero:    clamp(96px, 15vw, 226px);  /* one per site: opening/series wordmark moments */
  --type-d1:      clamp(72px, 11vw, 160px);  /* page H1 */
  --type-d2:      clamp(48px, 6vw, 86px);    /* section H2 */
  --type-d3:      clamp(36px, 4vw, 56px);    /* sub-section H2, card feature */
  --type-d4:      32px;                      /* H3 */
  --type-d5:      24px;                      /* card titles, product names */

  /* Text scale: Inter */
  --type-lead:    18px;  /* intro paragraph under a headline */
  --type-body:    16px;
  --type-small:   14px;
  --type-caption: 13px;  /* also the CTA size on desktop */

  /* Label scale: IBM Plex Mono, uppercase */
  --type-label:   12px;
  --type-label-s: 11px;  /* the floor. No text on the site goes below 11px */

  --leading-display: .92;
  --leading-tight:   1.2;
  --leading-body:    1.55;

  --tracking-display: -.015em;
  --tracking-label:   .12em;

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

  /* ─────────────────────────────────────────────
     4. SPACE, SIZE, SHAPE, LAYER
     ───────────────────────────────────────────── */

  /* 4px base */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  --section-y:     var(--space-9);  /* 96px; 64px under 760px */
  --gutter:        56px;            /* each side; 32px ≤1100, 20px ≤760, 16px ≤360 */
  --content-max:   1400px;
  --measure:       58ch;            /* max line length for reading text */

  --target-min:    44px;            /* smallest tappable size */
  --cta-height:    50px;
  --cta-height-s:  44px;
  --header-height: 84px;            /* 72–76px under 760px */

  --radius:        0;               /* FRANK has no rounded corners */
  --border:        1px;
  --border-strong: 2px;             /* selection, focus */
  --rule-accent:   3px;             /* red underline sweep */

  --z-below:  -1;
  --z-base:    1;
  --z-raised:  5;
  --z-menu:   29;
  --z-header: 30;
  --z-modal:  50;
  --z-skip:  100;

  /* ─────────────────────────────────────────────
     5. MOTION
     ───────────────────────────────────────────── */

  /* Durations */
  --dur-press:     140ms;  /* button press, tap feedback */
  --dur-fast:      180ms;  /* colour and opacity on hover */
  --dur-base:      240ms;  /* CTA label roll, underline sweep, icon nudge */
  --dur-medium:    280ms;  /* page transition in, viewer open, crossfade */
  --dur-slow:      650ms;  /* scroll reveals, image scale on hover */
  --dur-scene:    1600ms;  /* staged, once-per-page moments only */
  --stagger:        50ms;  /* between siblings; max 6 staggered items */

  /* Easing: no bounce, no overshoot, ever */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);  /* house curve: fast start, heavy landing */
  --ease-in:     cubic-bezier(.7, 0, .84, 0);  /* exits only */
  --ease-in-out: cubic-bezier(.65, 0, .35, 1); /* scrubbed or looping movement */
  --ease-linear: linear;                       /* scroll-linked progress bars */

  /* Distances */
  --lift-s:  6px;   /* hover lift, page-in offset */
  --lift-m: 20px;   /* scroll-reveal offset */
  --scale-press: .98;
  --scale-hover: 1.035;

  /* ─────────────────────────────────────────────
     6. LEGACY ALIASES: migration only, delete afterwards
     ───────────────────────────────────────────── */
  --black:   var(--ink-1000);
  --paper:   var(--bone-100);
  --muted:   var(--bone-500);
  --red:     var(--blood-500);
  --ease:    var(--ease-out);
  --display: var(--font-display);
  --mono:    var(--font-mono);
  --body:    var(--font-body);
  --cta-ink:         var(--text);
  --cta-on-ink:      var(--surface);
  --cta-hover-fill:  var(--bone-hover);
  --cta-border:      var(--line-strong);
  --cta-size:        var(--type-caption);
}

/* Light "comic page" surface. Apply .surface-page to a section; components adapt automatically.
   The existing story sections are listed so they share it without markup changes. */
.surface-page,
:where(.series-feature, .record-spread, .series-story, .series-making, .world-story) {
  --surface:        var(--bone-200);
  --surface-raised: #e4e4e4;
  --text:           var(--ink-1000);
  --text-secondary: var(--ink-600); /* 6.5:1 on bone-200 */
  --text-muted:     var(--ink-550); /* 5.0:1 on bone-200 */
  --line:           #08080830;
  --line-strong:    #08080880;
  --accent-text:    var(--blood-500); /* 4.4:1, so 14px semibold and up only */
  --focus-ring:     var(--ink-1000);
  --cta-ink:        var(--ink-1000);
  --cta-on-ink:     var(--bone-100);
  --cta-hover-fill: var(--ink-700);
  --cta-border:     var(--ink-500);
  background: var(--surface);
  color: var(--text);
}

/* Breakpoints. CSS custom properties can't be used inside @media, so these are the only four allowed:
   ≤360px  small phone
   ≤760px  phone
   ≤1100px tablet / small laptop
   ≥1700px large desktop
   The current code also uses 700, 900, 1000 and 1250. Fold those into the four above. */

@media (max-width: 1100px) { :root { --gutter: 32px; } }
@media (max-width: 760px)  { :root { --gutter: 20px; --section-y: var(--space-8); --header-height: 76px; --cta-size: 12px; } }
@media (max-width: 360px)  { :root { --gutter: 16px; } }

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-press: 0ms; --dur-fast: 0ms; --dur-base: 0ms; --dur-medium: 0ms;
    --dur-slow: 0ms; --dur-scene: 0ms; --stagger: 0ms;
    --lift-s: 0px; --lift-m: 0px;
  }
}