/* ==========================================================================
   Cokaizen Design Tokens · v1.3.2 · 2026-08-23
   TOKENS ONLY. Component primitives live in brand.css — load this first,
   then brand.css, then your project styles.
   Never declare a colour inside a media or [data-theme] block.
   ========================================================================== */

:root {
  /* Paints the BROWSER's own ui — scrollbars, native form controls, the
     pre-paint canvas — in the active scheme. Distinct from
     prefers-color-scheme, which only drives our tokens. Without this a dark
     page keeps light scrollbars and flashes white before CSS applies. */
  color-scheme: light dark;

  /* --- Neutrals (light) --------------------------------------------- */
  --paper:       #F1F0EC;
  --surface:     #FBFAF8;
  --sunk:        #E7E6E0;
  --rule:        #D8D7D0;
  --rule-strong: #C4C3BB;
  --ink:         #1B1D21;
  --ink-2:       #4C515A;
  --ink-3:       #656B75;

  /* --- Accent: vermilion 朱 (CORE) ---------------------------------- */
  --shu:         #B23F29;
  --shu-soft:    #F5E6E2;

  /* --- Accent: indigo 藍 (LEXICON LAYER ONLY) ----------------------- */
  --ai:          #274A73;
  --ai-soft:     #E6ECF3;

  /* --- Signal: andon (CORE) ----------------------------------------- */
  --ok:          #2E6B4F;   /* 松葉 matsuba  */
  --ok-soft:     #E4EEE8;
  --warn:        #8A5D12;   /* 山吹 yamabuki */
  --warn-soft:   #F7EEDC;
  --stop:        #8C2B33;   /* 蘇芳 suō      */
  --stop-soft:   #F5E3E4;

  /* --- Type --------------------------------------------------------- */
  --f-en: "Newsreader", Georgia, "Times New Roman", serif;
  --f-jp: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-mo: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --f-ui: "IBM Plex Sans", system-ui, -apple-system, sans-serif; /* app UI only */

  --t-micro:   11px;
  --t-caption: 13px;
  --t-small:   15px;
  --t-body:    17px;
  --t-lead:    20px;
  --t-h4:      19px;
  --t-h3:      21px;
  --t-h2:      clamp(25px, 3.4vw, 33px);
  --t-h1:      clamp(38px, 6vw, 58px);
  --t-display: clamp(52px, 9vw, 88px);

  /* Line-height tightens as size grows. NEW in v1.1. */
  --lh-body:    1.65;   /* small, body      */
  --lh-lead:    1.5;    /* lead             */
  --lh-heading: 1.3;    /* h3, h4           */
  --lh-tight:   1.2;    /* h1, h2, display  */

  --ls-label: 0.12em;

  /* --- Space (4px base) --------------------------------------------- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 20px;  --s-6: 24px;  --s-7: 32px;  --s-8: 40px;
  --s-9: 56px;  --s-10: 76px; --s-11: 120px;

  /* Structural aliases. NEW in v1.1 — use these, not raw steps, for layout. */
  --gap-page-top:    var(--s-10);  /* 76  — above the header            */
  --gap-page-bottom: var(--s-11);  /* 120 — below the last content      */
  --gap-structure:   var(--s-10);  /* 76  — header / main / footer      */
  --gap-section:     var(--s-10);  /* 76  — between sections in main    */
  --gap-group:       var(--s-6);   /* 24  — between groups in a section */
  --gap-element:     var(--s-3);   /* 12  — between related elements    */

  /* --- Shape -------------------------------------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --measure: 66ch;
  --column: 860px;

  /* --- Motion ------------------------------------------------------- */
  --m-hover:  160ms ease;
  --m-reveal: 240ms ease;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #15171B;
    --surface:     #1D2026;
    --sunk:        #101216;
    --rule:        #2F343C;
    --rule-strong: #3D434C;
    --ink:         #E9E9E5;
    --ink-2:       #ABB0B8;
    --ink-3:       #878D97;

    --shu:         #E0806A;
    --shu-soft:    #2C1E1B;
    --ai:          #92B2D9;
    --ai-soft:     #1B2733;

    --ok:          #7FC0A0;
    --ok-soft:     #17241E;
    --warn:        #E0B45F;
    --warn-soft:   #2A2216;
    --stop:        #E08A92;
    --stop-soft:   #2B191B;
  }
}

:root[data-theme="light"] { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:       #15171B;
  --surface:     #1D2026;
  --sunk:        #101216;
  --rule:        #2F343C;
  --rule-strong: #3D434C;
  --ink:         #E9E9E5;
  --ink-2:       #ABB0B8;
  --ink-3:       #878D97;

  --shu:         #E0806A;
  --shu-soft:    #2C1E1B;
  --ai:          #92B2D9;
  --ai-soft:     #1B2733;

  --ok:          #7FC0A0;
  --ok-soft:     #17241E;
  --warn:        #E0B45F;
  --warn-soft:   #2A2216;
  --stop:        #E08A92;
  --stop-soft:   #2B191B;
}