/* ==========================================================================
   Wyatt Lo — Design System v2 "Paper & Marker"
   Tokens. Every component reads from these; never hard-code a hex.
   ========================================================================== */

/* Paper (light) ----------------------------------------------------------- */
:root,
:root[data-theme="light"], .theme-light {
  --paper:          #F3EFE7;  /* the page. 60% of every screen            */
  --paper-deep:     #E8E1D3;  /* bands, image wells, ghost numerals       */
  --paper-ghost:    #E2D9C9;  /* oversized background numerals ("02")    */
  --ink:            #14120F;  /* text, cut-out jackets. 16.3:1 on paper   */
  --graphite:       #5A544B;  /* meta, captions, dates. 6.5:1             */
  --rule:           #CFC6B6;  /* hairlines only (decorative)              */
  --rule-strong:    #A99F8E;  /* input borders, outlined pills            */

  --signal:         #FF6A1A;  /* THE orange (from the tie). Fills only.   */
  --signal-display: #D94C06;  /* orange words >= 40px on paper. 3.7:1     */
  --signal-text:    #B23E00;  /* orange words < 40px on paper. 5.1:1      */
  --on-signal:      #14120F;  /* text on an orange fill is always ink     */
  --on-ink:         #F3EFE7;

  --focus:          #D94C06;
  --grain-opacity:  .22;
  --grain-blend:    multiply;
  --grain-tone:     0;        /* noise colour channel: 0 = dark specks    */
  color-scheme: light;
}

/* Darkroom (dark) --------------------------------------------------------- */
:root[data-theme="dark"], .theme-dark {
  --paper:          #121110;
  --paper-deep:     #1D1B18;
  --paper-ghost:    #24211D;
  --ink:            #F1ECE3;
  --graphite:       #A39C90;
  --rule:           #3A362F;
  --rule-strong:    #57514A;
  --signal:         #FF7A2E;
  --signal-display: #FF7A2E;
  --signal-text:    #FF9A5C;
  --on-signal:      #121110;
  --on-ink:         #121110;
  --focus:          #FF7A2E;
  --grain-opacity:  .10;
  --grain-blend:    screen;
  --grain-tone:     1;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:          #121110;
    --paper-deep:     #1D1B18;
    --paper-ghost:    #24211D;
    --ink:            #F1ECE3;
    --graphite:       #A39C90;
    --rule:           #3A362F;
    --rule-strong:    #57514A;
    --signal:         #FF7A2E;
    --signal-display: #FF7A2E;
    --signal-text:    #FF9A5C;
    --on-signal:      #121110;
    --on-ink:         #121110;
    --focus:          #FF7A2E;
    --grain-opacity:  .10;
    --grain-blend:    screen;
    --grain-tone:     1;
    color-scheme: dark;
  }
}

/* Type -------------------------------------------------------------------- */
:root {
  /* Four voices, one job each */
  --font-shout: "Darumadrop One", "LXGW WenKai TC", "Noto Sans TC", sans-serif;   /* blobby display  */
  --font-hand:  "Gaegu", "LXGW WenKai TC", "Noto Sans TC", cursive;              /* margin notes    */
  --font-voice: "Host Grotesk", "Noto Sans TC", "Helvetica Neue", Arial, sans-serif; /* body       */
  --font-slug:  "Fragment Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;  /* print meta  */

  /* Scale. Display sizes are fluid; reading sizes are fixed. */
  --t-cover:     clamp(92px, 21vw, 360px);   /* the name on the cover      */
  --t-display-xl:clamp(68px, 12vw, 184px);   /* section words: "colour"    */
  --t-display-l: clamp(52px, 7.4vw, 112px);  /* stat numbers, "thank you." */
  --t-display-m: clamp(38px, 4.6vw, 68px);   /* project names              */
  --t-numeral:   clamp(160px, 26vw, 420px);  /* ghost "02" behind sections */
  --t-hand-l:    clamp(26px, 2.6vw, 36px);
  --t-hand-s:    22px;
  --t-title:     22px;
  --t-lead:      clamp(20px, 1.9vw, 26px);
  --t-body:      16px;
  --t-small:     14px;
  --t-slug:      12px;

  /* Space: 4pt base */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;  --s-6: 24px;
  --s-8: 32px; --s-12: 48px; --s-16: 64px; --s-24: 96px; --s-32: 128px; --s-48: 192px;

  /* Layout */
  --page-max: 1440px;
  --gutter:   clamp(16px, 4vw, 56px);
  --measure:  62ch;
  --nav-h:    64px;

  /* Shape. Photos and panels are square; buttons are hand-made pills. */
  --r-none: 0;
  --r-tag:  3px;
  --r-pill: 999px;
  --r-blob: 46% 54% 52% 48% / 58% 44% 56% 42%;
  --r-blob-2: 54% 46% 44% 56% / 46% 58% 42% 54%;
  --hairline: 1px;

  /* Motion. "Marker, not machine." */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);     /* entrances, expands     */
  --ease-in:     cubic-bezier(.55, 0, .75, .1);    /* exits                  */
  --ease-inout:  cubic-bezier(.65, 0, .35, 1);     /* FLIP, theme swap       */
  --ease-pop:    cubic-bezier(.34, 1.56, .64, 1);  /* stickers, blobs settle */
  --d-press: 120ms;
  --d-hover: 220ms;
  --d-photo: 420ms;
  --d-draw:  900ms;
  --d-flip:  720ms;
  --d-boil:  120ms;   /* "line boil" frame step (12fps, like hand animation) */
  --stagger: 60ms;

  /* Layers */
  --z-base: 0; --z-raised: 10; --z-nav: 50; --z-menu: 80; --z-cursor: 1000;
}