/* ==========================================================================
   TOKENS — the only file allowed to contain raw values.
   Mirrors design-rule.md §2 (colour), §3 (type), §5 (space), §7 (motion).
   Component CSS must resolve everything through these custom properties.
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- COLOUR */
  /* Light substrate — "graph paper". Never pure #FFF. */
  --paper:        #EFEEEA;
  --paper-2:      #E4E2DC;
  --rule:         #D6D3CB;
  --rule-major:   #C4C0B6;

  /* Dark substrate — "studio blackout". Never pure #000. */
  --ink:          #0D0D0D;
  --ink-2:        #171717;
  --rule-dark:    #232323;
  --rule-dark-mj: #2E2E2E;

  /* Type */
  --fg:           #0D0D0D;
  --fg-invert:    #F4F3EF;
  --fg-mute:      #6E6A62;
  --fg-mute-dark: #8A867E;

  /* Hairlines */
  --line:         rgba(13, 13, 13, 0.12);
  --line-invert:  rgba(244, 243, 239, 0.16);
  --line-strong:  rgba(13, 13, 13, 0.20);

  /* Card faces. Deliberately lighter than --paper so a tile lifts off the
     graph substrate instead of dissolving into it; --paper-2 sat only ~11
     units from the paper and read as muddy. Still never pure #FFF (§2.1). */
  --surface:      #FAF9F6;
  --surface-dark: #1C1C1C;

  /* Hard-edged offset, 0 blur — a printed card sitting on paper, not a soft
     UI drop shadow (§8 bans those as a hierarchy crutch). */
  --card-lift: 5px 5px 0 rgba(13, 13, 13, 0.08);

  /* The accent-coloured hover lift is deliberately NOT a token. A custom
     property containing var(--accent) is substituted against the element it is
     declared on — here :root — so it would freeze to the default motion violet
     and inherit that everywhere, ignoring each tile's own discipline. Write
     `box-shadow: var(--card-lift-offset) var(--accent)` at the point of use so
     --accent resolves on the tile itself. */
  --card-lift-offset: 9px 9px 0;

  /* Discipline accents — one per section, max ~12% of viewport (§2.2) */
  --acc-motion:  #7B2FF7;
  --acc-3d:      #00C2A8;
  --acc-brand:   #FF2D55;
  --acc-print:   #2F6BFF;
  --acc-social:  #E8C547;
  /* Sampled from the illustration set itself, so the chip and hover states sit
     in the same family as the artwork rather than fighting it. */
  --acc-illustration: #F96A50;

  /* Active accent. Sections override this; components only ever read --accent. */
  --accent: var(--acc-motion);

  /* Text-safe form of the active accent (§2.3). Most of the accents are tuned
     for fills and rules, where luminance barely matters; as *text on paper*
     --acc-illustration lands at 2.8:1, well under the 4.5:1 micro-label floor.
     Components that set small text in the accent read --accent-ink instead,
     which falls back to the muted foreground for any discipline that has not
     had a checked value computed for it. */
  --accent-ink: var(--fg-mute);
  --acc-illustration-ink: #C74424;   /* 4.7:1 on --surface */

  /* ------------------------------------------------------------ TYPOGRAPHY */
  --f-display: 'Archivo Black', 'Helvetica Neue', Impact, sans-serif;
  --f-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-micro:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-hand:    'Caveat', 'Bradley Hand', cursive;

  /* Sized so a three-line hero still clears the fold beside the reel. Pushing
     the vw term higher overflows the 9-col hero column before the max caps. */
  --t-mega:  clamp(2.5rem, 8.5vw, 7.5rem);
  --t-xl:    clamp(2rem, 5.5vw, 4.5rem);
  --t-lg:    clamp(1.5rem, 3.2vw, 2.5rem);
  --t-md:    clamp(1.25rem, 2vw, 1.6rem);

  --t-body:  clamp(1rem, 1.05vw, 1.125rem);
  --t-lead:  clamp(1.125rem, 1.6vw, 1.375rem);

  --t-micro: 0.6875rem;
  --t-cap:   0.8125rem;

  /* Tracking tightens as size grows (§3.3) */
  --tr-mega: -0.045em;
  --tr-xl:   -0.035em;
  --tr-lg:   -0.02em;
  --tr-micro: 0.16em;

  --lh-mega: 0.82;
  --lh-disp: 0.86;
  --lh-text: 1.55;

  /* ----------------------------------------------------------------- SPACE */
  --s1: 8px;   --s2: 16px;  --s3: 24px;  --s4: 32px;
  --s6: 48px;  --s8: 64px;  --s12: 96px; --s16: 128px; --s24: 192px;

  --page-max: 1440px;
  --gutter:   clamp(20px, 5vw, 72px);

  /* Graph-paper cell. Must stay a multiple of the 8px base (§4.1 / §5.1). */
  --cell:       24px;
  --cell-major: 120px;

  /* ---------------------------------------------------------------- MOTION */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --d-fast: 180ms;
  --d-base: 320ms;
  --d-slow: 620ms;

  /* ----------------------------------------------------------------- MISC */
  --nav-h: 72px;
  --z-nav: 100;
  --z-cursor: 9999;
}

/* Per-discipline accent scoping. Set on a section or a tile; children inherit. */
[data-accent="motion"] { --accent: var(--acc-motion); }
[data-accent="3d"]     { --accent: var(--acc-3d);     }
[data-accent="brand"]  { --accent: var(--acc-brand);  }
[data-accent="print"]  { --accent: var(--acc-print);  }
[data-accent="social"] { --accent: var(--acc-social); }
[data-accent="illustration"] {
  --accent: var(--acc-illustration);
  --accent-ink: var(--acc-illustration-ink);
}

@media (max-width: 768px) {
  :root {
    --cell: 16px;
    --cell-major: 80px;
    --nav-h: 60px;
  }
}