/* ==========================================================================
   BONDEE — DESIGN TOKENS
   Single source of truth. Ports to Next.js as globals.css @theme block.
   ========================================================================== */

:root {
  /* --- RAW PALETTE ------------------------------------------------------
     Values come from the approved Bondee logo work ("Turn 2 colour system",
     applied by Turn 4). Ink is a warm near-black, not a blue-black; washi is
     the paper it prints on; vermilion is the single signal.

     Vermilion is authored in oklch — the source of truth — with a computed
     sRGB fallback for the rare engine that lacks it.                       */
  --c-ink:            #17171a;
  --c-ink-panel:      #202024;
  --c-ink-fg:         #f4f0e8;
  --c-washi:          #f4f0e8;
  --c-washi-panel:    #e8e3d8;
  --c-washi-fg:       #17171a;
  --c-vermilion:      #cb4832;
  --c-vermilion:      oklch(0.58 0.17 32);
  --c-vermilion-dim:  oklch(0.5 0.14 32);
  --c-graphite:       rgba(244, 240, 232, 0.55);
  --c-clay:           rgba(23, 23, 26, 0.65);
  --c-rule-ink:       rgba(244, 240, 232, 0.14);
  --c-rule-washi:     rgba(23, 23, 26, 0.1);

  /* Machine layer: cold graphite, indigo annotations. Deliberately chromatic
     opposite of the human layer so read mode is legible from a thumbnail.   */
  --c-machine-bg:     #0a0c10;
  --c-machine-panel:  #0e1118;
  --c-machine-fg:     #c6cbd9;
  --c-machine-muted:  #5e6478;
  --c-machine-rule:   #22252e;
  --c-anno:           #6e7bff;

  /* --- TYPEFACES --------------------------------------------------------
     Japanese-first, but the stacks are mixed on purpose: Latin glyphs resolve
     from the Latin face and Japanese falls through to the JA face in the same
     stack. One stack, two scripts, no per-language class switching.

     The accent gesture has no Japanese equivalent — Mincho has no true italic,
     and a synthesised slant on kanji looks broken. So in JA the emphasis
     becomes Mincho in vermilion against the Gothic display: the authentic
     counterpart to a serif italic inside a grotesk headline.               */
  --f-display: "Familjen Grotesk", "Zen Kaku Gothic New", "Helvetica Neue", Arial, sans-serif;
  --f-serif:   "Instrument Serif", "Zen Old Mincho", Georgia, serif;
  --f-label:   "Martian Mono", ui-monospace, monospace;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;

  /* The wordmark is its own voice and belongs to no other role: Bodoni Moda,
     per the Turn 4 logo direction. Never used for running text. */
  --f-wordmark: "Bodoni Moda", Didot, "Times New Roman", serif;

  /* --- TYPE SCALE ------------------------------------------------------- */
  /* Trionn's measured signature: tracking to -0.055em, line-height below 1. */
  /* Capped at 10rem: Trionn's h1 measures ~80–100px in the wild and its 117px
     marquee is the ceiling. Past ~160px the headline stops reading as a
     sentence and starts reading as texture. */
  --t-d1:        clamp(2.75rem, 11vw, 10rem);
  --t-d1-lh:     0.86;
  --t-d1-ls:     -0.055em;

  --t-d2:        clamp(2.25rem, 7.5vw, 7.5rem);
  --t-d2-lh:     0.9;
  --t-d2-ls:     -0.045em;

  --t-d3:        clamp(1.625rem, 3.6vw, 3.25rem);
  --t-d3-lh:     0.96;
  --t-d3-ls:     -0.03em;

  --t-numeral:   clamp(5rem, 18vw, 15.5rem);
  --t-numeral-lh: 0.78;
  --t-numeral-ls: -0.06em;

  --t-lead:      clamp(1.0625rem, 1.6vw, 1.5rem);
  --t-lead-lh:   1.35;
  --t-lead-ls:   -0.015em;

  --t-body:      1rem;
  --t-body-lh:   1.55;
  --t-body-ls:   -0.008em;

  --t-label:     0.6875rem; /* 11px — mono, uppercase, never larger  */
  --t-label-lh:  1.4;
  --t-label-ls:  0.1em;

  --t-micro:     0.625rem;  /* 10px — the floor. Nothing goes below. */
  --t-micro-lh:  1.3;
  --t-micro-ls:  0.14em;

  /* --- GRID ------------------------------------------------------------- */
  --grid-cols:   12;
  --gutter:      1.5rem;
  --margin:      clamp(1.25rem, 4vw, 4.5rem);
  --rail-w:      72px;

  /* --- MOTION ----------------------------------------------------------- */
  --e-soft:      cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out:    cubic-bezier(0.65, 0, 0.35, 1);
  --d-micro:     0.24s;
  --d-ui:        0.6s;
  --d-reveal:    0.9s;
  --d-morph:     1.1s;

  /* --- ELEVATION / MISC ------------------------------------------------- */
  --grain-opacity: 0.035;
  --lens-r:      180px;
}

/* ==========================================================================
   SEMANTIC SURFACES
   Sections declare data-surface; ScrollTrigger drives the same attribute on
   <html> so chrome (nav, rail, cursor) inverts in lockstep with the section.
   ========================================================================== */

/* Ink is the default surface, declared on :root rather than left to JS. Without
   it, var(--bg) is undefined until initSurfaces runs — which makes body's
   background declaration invalid and paints the first frame on bare canvas. */
:root {
  --bg:         var(--c-ink);
  --fg:         var(--c-ink-fg);
  --fg-muted:   var(--c-graphite);
  --rule:       var(--c-rule-ink);
  --panel:      var(--c-ink-panel);
  --signal:     var(--c-vermilion);
  --signal-dim: var(--c-vermilion-dim);
}

/* Paint the canvas too, so overscroll and the area behind short pages match. */
html { background: var(--bg); }

[data-surface="ink"] {
  --bg:        var(--c-ink);
  --fg:        var(--c-ink-fg);
  --fg-muted:  var(--c-graphite);
  --rule:      var(--c-rule-ink);
  --panel:     var(--c-ink-panel);
  --signal:    var(--c-vermilion);
  --signal-dim: var(--c-vermilion-dim);
}

[data-surface="paper"] {
  --bg:        var(--c-washi);
  --fg:        var(--c-washi-fg);
  --fg-muted:  var(--c-clay);
  --rule:      var(--c-rule-washi);
  --panel:     var(--c-washi-panel);
  --signal:    var(--c-vermilion);
  --signal-dim: var(--c-vermilion-dim);
}

/* Machine layer overrides whichever surface is active. Higher specificity
   (element + attribute) so it wins regardless of source order. */
html[data-read-mode="machine"],
html[data-read-mode="machine"] [data-surface] {
  --bg:        var(--c-machine-bg);
  --fg:        var(--c-machine-fg);
  --fg-muted:  var(--c-machine-muted);
  --rule:      var(--c-machine-rule);
  --panel:     var(--c-machine-panel);
  --signal:    var(--c-anno);
  --signal-dim: color-mix(in srgb, var(--c-anno) 64%, transparent);
}

/* Colour transitions belong to the surface inversion, not to every paint.
   Scoped to the elements that actually change so we never animate text nodes
   during a scroll-driven repaint. */
body,
[data-surface] {
  transition: background-color 0.5s var(--e-soft), color 0.5s var(--e-soft);
}

/* ==========================================================================
   JAPANESE TYPOGRAPHY
   Full-width glyphs fill the em box, so Latin metrics do not transfer: display
   leading has to open up or the kanji collide, and prose leading has to open a
   lot more or it becomes a wall. Tracking stays negative but shallower — kanji
   punish tight tracking faster than Latin does.
   ========================================================================== */

html[lang="ja"] {
  --t-d1-lh:   1;
  --t-d1-ls:   -0.035em;
  --t-d2-lh:   1.06;
  --t-d2-ls:   -0.03em;
  --t-d3-lh:   1.2;
  --t-d3-ls:   -0.02em;
  --t-lead-lh: 1.8;
  --t-lead-ls: 0.005em;
  --t-body-lh: 1.9;
  --t-body-ls: 0.005em;
  --t-label-ls: 0.08em;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --d-micro: 0.01s;
    --d-ui: 0.2s;
    --d-reveal: 0.3s;
    --d-morph: 0.3s;
  }
}