  /* ===================================================================
     Design tokens — ClickHouse-derived system.
     Canvas #0a0a0a · single accent #faff69 · Inter + JetBrains Mono.
     No drop shadows: depth comes from canvas ↔ surface-card contrast.
     =================================================================== */
  :root{
    --canvas:#0a0a0a;
    --surface-soft:#121212;
    --surface-card:#1a1a1a;
    --surface-elevated:#242424;
    --hairline:#2a2a2a;
    --hairline-strong:#3a3a3a;

    --primary:#faff69;
    --primary-active:#e6eb52;
    --primary-disabled:#3a3a1f;
    --on-primary:#0a0a0a;

    --on-dark:#ffffff;
    --body:#cccccc;
    --body-strong:#e6e6e6;
    --muted:#888888;
    --muted-soft:#5a5a5a;

    --emerald:#22c55e;   /* agreed  */
    --blue:#3b82f6;      /* hold    */
    --rose:#ef4444;      /* fix, laser */

    --sans:"Inter","Noto Sans KR","Noto Sans JP","Noto Sans SC",
           -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;
    /* Reading surfaces run on --sans per the guide (no serif counter-voice).
       Swap this one line back to Noto Serif if you want the editorial voice:
       --serif:"Noto Serif KR","Noto Serif JP","Noto Serif SC","Noto Serif",serif; */
    --serif:var(--sans);
    /* Display voice, for the two headlines that carry the argument: the hero
       and the closer. The rule above governs reading surfaces — body copy,
       panels, the log — and those stay on --sans. These two are not read, they
       are heard, and a grotesque says nothing there that every other tool's
       landing page has not already said. Noto Serif has KR, JP and SC cuts, so
       /en/ /ja/ /zh/ speak in the same voice instead of falling back. */
    --display:"Noto Serif KR","Noto Serif JP","Noto Serif SC","Noto Serif",Georgia,serif;

    --r-xs:4px; --r-sm:6px; --r-md:8px; --r-lg:12px; --r-pill:9999px;
    --s-xxs:4px; --s-xs:8px; --s-sm:12px; --s-md:16px; --s-lg:24px; --s-xl:32px; --s-xxl:48px;
    --ez:cubic-bezier(.2,.85,.25,1);
  }
  html[lang="ja"]{--sans:"Inter","Noto Sans JP","Noto Sans KR",-apple-system,sans-serif;
    --display:"Noto Serif JP","Noto Serif KR","Noto Serif",Georgia,serif}
  html[lang="zh"]{--sans:"Inter","Noto Sans SC","Noto Sans KR",-apple-system,sans-serif;
    --display:"Noto Serif SC","Noto Serif KR","Noto Serif",Georgia,serif}

  /* Light table: a product surface, not a marketing one. Same tokens, inverted floor. */
  html[data-theme="light"]{
    --canvas:#e8e8e6; --surface-soft:#f2f2f0; --surface-card:#ffffff; --surface-elevated:#f7f7f5;
    --hairline:#d8d8d4; --hairline-strong:#bcbcb6;
    --primary:#d8dd2e; --primary-active:#c3c722; --on-primary:#0a0a0a;
    --on-dark:#0a0a0a; --body:#33332f; --body-strong:#1a1a18; --muted:#6b6b66; --muted-soft:#93938c;
  }
