/* Reyoi · Direction B "Yu-pop" · design tokens v2 (18 Oct 2026, DKing review).
   Drop-in for BRIEF §8 as css/tokens.css. Contrast ratios: WCAG 2.x, computed in identity/REVIEW-BRIEF8.md.
   v2 adds: separate tool-tile tokens, BC on base palette, card radius, shadows, sheen, heading line heights. */
:root{
  /* ---- Base colour ---- */
  --color-bg:#FFFFFF;          /* White */
  --color-surface:#F2F4FA;     /* Mist */
  --color-border:#DDE1EE;      /* hairlines, dividers, BC chip edge (decorative, not text) */
  --color-text:#111322;        /* Night: 18.42:1 on bg */
  --color-text-muted:#4E5470;  /* Slate: 7.43:1 on bg, 6.76:1 on surface. Replaces #9ca3af */
  --color-primary:#2B3FE0;     /* Ai blue: 7.27:1 both ways with white */
  --color-on-primary:#FFFFFF;
  --color-accent:#FFD43B;      /* Yuzu: fills behind Night text only (12.92:1). Never text on white (1.43:1) */
  --color-on-accent:#111322;
  --color-success:#0F7B57;     /* 5.26:1 on white */
  --color-warn:#B04A00;        /* 5.49:1 on white */
  --color-shade:#0B0D1A;
  --color-on-image:#FFFFFF;

  /* ---- Region chips ---- */
  --color-japan:#FFD43B;       /* Yuzu chip */
  --color-on-japan:#111322;    /* 12.92:1 */
  /* TODO(design) BRIEF §8.10: BC accent undecided. Until the user answers, BC = base palette, no Momo. */
  --color-bc:#F2F4FA;          /* Mist chip (was #FF5C8A in v1) */
  --color-on-bc:#111322;       /* 16.75:1 */
  --color-bc-edge:#DDE1EE;     /* 1px edge so the Mist chip shows on white/Mist (Mist on white is only 1.10:1) */

  /* ---- Jumbo tool tiles (Japan pages only). Independent of region colours. ---- */
  --color-tool-jumboradar:#2B3FE0;      /* Ai blue fill */
  --color-on-tool-jumboradar:#FFFFFF;   /* text 7.27:1 */
  --color-tool-jumboradar-icon:#FFD43B; /* icon 5.10:1 (non-text needs 3:1) */
  --color-tool-jumbosim:#FFD43B;        /* Yuzu fill */
  --color-on-tool-jumbosim:#111322;     /* text 12.92:1; Slate also OK here at 5.21:1 */
  --color-tool-jumbosim-icon:#111322;
  --color-tool-jumbochat:#FF5C8A;       /* Momo fill: tool colour only, not a region colour */
  --color-on-tool-jumbochat:#111322;    /* text 6.27:1. Only Night: white 2.94, Slate 2.53, Ai blue 2.47 all FAIL */
  --color-tool-jumbochat-icon:#111322;

  /* ---- Overlays, shadows, illustrative treatment ---- */
  --overlay-hero:linear-gradient(to top,rgb(11 13 26/.88),rgb(11 13 26/.62) 42%,rgb(11 13 26/0) 72%);
  --overlay-hero-top:linear-gradient(to bottom,rgb(11 13 26/.45),rgb(11 13 26/0) 22%); /* keeps header wordmark legible on photos */
  --overlay-badge:rgb(11 13 26/.72);    /* e.g. "▶ Reel" badge on cards, white text */
  --shadow-card:0 1px 0 rgb(17 19 34/.06),0 8px 24px rgb(17 19 34/.08);
  --shadow-pop:0 12px 32px rgb(17 19 34/.16); /* menu panel, popovers (new, not on board) */
  --sheen-alpha:.07;
  --sheen-band:10px;
  --sheen-illustrative:repeating-linear-gradient(135deg,rgb(255 255 255/0) 0 10px,rgb(255 255 255/.07) 10px 20px);
  --filter-illustrative:saturate(.9);

  /* ---- Fonts ---- */
  --font-display:"Bricolage Grotesque",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ja:"Hiragino Sans","Noto Sans JP",sans-serif;
  --weight-display:800;
  --weight-body:400;
  --weight-strong:700;

  /* ---- Type scale (mobile; desktop overrides below) ---- */
  --text-display:2.75rem;           /* 44px */
  --text-display-compact:2.5rem;    /* 40px: mobile hero only, if H1 + line + email don't fit 390×844 */
  --text-h1:2.25rem; --text-h2:1.75rem; --text-h3:1.375rem;
  --text-body:1rem; --text-small:.875rem; --text-caption:.75rem;
  --leading-tight:1.02;             /* display / hero H1 */
  --leading-h1:1.05; --leading-h2:1.1; --leading-h3:1.15;
  --leading-body:1.5; --leading-small:1.45; --leading-caption:1.4;
  --tracking-display:-.035em;       /* display, H1, H2, tool names */
  --tracking-heading:-.02em;        /* H3, card titles */
  --tracking-wordmark:-.045em;      /* "reyoi" wordmark */

  /* ---- Space ---- */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.5rem; --space-6:2rem; --space-7:3rem; --space-8:4rem;

  /* ---- Radius ---- */
  --radius-chip:.25em;   /* stickers and region chips: scales with chip text */
  --radius-sm:8px;       /* badges, "Illustrative image" label, submit inside email field */
  --radius-md:14px;      /* buttons, inputs, tool rows */
  --radius-card:20px;    /* place and Reel guide cards */
  --radius-lg:24px;      /* tool tile cards, panels, desktop hero */
  --radius-tile:26%;     /* square icon tiles: "r·" mark, tool icons (≈17/64) */
  --radius-pill:999px;
}
@media (min-width:800px){
  :root{
    --text-display:4.25rem; --text-h1:3rem; --text-h2:2.25rem; /* h3 stays 1.375rem */
    --leading-h1:1.02; --leading-h2:1.05; --leading-h3:1.15;
  }
}