/* ============================================================
   AWASE — Design Tokens  (SSOT: docs/design/02-brand-design.md §B案)
   B案「テイスティング・ラボ」: 計器ネイビー×ベリー×五味データカラー
   全カラーは 02 のWCAG 2.2 AA 実測合格値。改変時は 02 と同時更新。
   ============================================================ */
:root {
  /* ---- color: base ---- */
  --bg:        #FAFAF6;   /* page background */
  --surface:   #FFFFFF;   /* cards / panels */
  --tint:      #FBEDF2;   /* soft accent panel */
  --text:      #20242E;   /* body (14.83:1 on bg) */
  --text-muted:#5A6170;   /* secondary (5.94:1) */
  --brand:     #233046;   /* headings / header (12.68:1) */
  --brand-900: #161D2B;   /* dark band (game surfaces) */
  --accent:    #B01E4F;   /* CTA / emphasis — RESERVED (6.38:1) */
  --accent-ink:#FFFFFF;   /* text on accent (6.68:1) */
  --border:    #E4E4DC;   /* hairlines */
  --border-strong:#CBCBBE;

  /* ---- color: five-taste data system (deep=text/line, fill=surface) ---- */
  --sweet:#8A5E0C;  --sweet-fill:#F2C14E;
  --acid: #5F7A18;  --acid-fill: #C9D65F;
  --salt: #1C6E80;  --salt-fill: #7EC5D6;
  --bitter:#6D5844; --bitter-fill:#C7B295;
  --umami:#A03D2E;  --umami-fill:#E8926F;
  /* extra profile axes */
  --tannin:#6B4A6E; --tannin-fill:#B99CBC;

  /* ---- color: semantic ----
     NOTE: --ng is an INDEPENDENT deep crimson, distinct from --accent (berry CTA).
     Quality/match tiers use a diverging scale: good→--ok(green), fair→--warn(gold),
     poor/risk→--ng(crimson). --accent is RESERVED for CTAs/primary emphasis only. */
  --ok:#1C5C3A; --ok-tint:#E7F1EA;   /* text-safe green: 6.88:1 on ok-tint */
  --ng:#8F1839; --ng-tint:#FBE3E9;   /* independent crimson: 8.5:1 on bg, ≠ --accent */
  --warn:#7E602B; --warn-tint:#FBF1DC;
  --info:#1C6E80; --info-tint:#E4F1F4;

  /* ---- typography ---- */
  --font-head:"Space Grotesk","Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  --font-body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif;
  --font-num: "Space Grotesk",var(--font-body);   /* tabular numerals */
  --fs-body:16px;
  --lh-body:1.9;
  --lh-tight:1.35;
  --scale:1.25;                        /* modular scale ratio */
  --fs-h1:clamp(2rem, 1.2rem + 3.5vw, 3.4rem);
  --fs-h2:clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem);
  --fs-h3:clamp(1.2rem, 1.0rem + 0.8vw, 1.5rem);
  --fs-small:0.85rem;
  --fs-kicker:0.75rem;

  /* ---- shape & depth (浮遊系 / 計器の語彙) ---- */
  --radius-s:8px; --radius-m:16px; --radius-l:24px; --radius-pill:9999px;
  --shadow-sm:0 1px 2px rgba(22,29,43,.05);
  --shadow-md:0 2px 4px rgba(22,29,43,.04), 0 6px 16px rgba(22,29,43,.08);
  --shadow-lg:0 4px 8px rgba(22,29,43,.05), 0 12px 32px rgba(22,29,43,.10);
  --ring:0 0 0 3px rgba(176,30,79,.35);           /* focus ring on accent */
  --ring-brand:0 0 0 3px rgba(35,48,70,.30);

  /* ---- spacing scale ---- */
  --sp-0:4px; --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:48px; --sp-5:96px; --sp-6:128px;

  /* ---- layout rails ---- */
  --prose:68ch;            /* readable line length for long-form */
  --wide:1200px;           /* wide readable content */
  --gutter:clamp(16px, 2.2vw, 40px);
  --grid-gap:clamp(16px, 1.6vw, 24px);
  --header-h:64px;
  --tabbar-h:64px;

  /* ---- motion ---- */
  --ease:cubic-bezier(.16,1,.3,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-micro:200ms; --dur-ui:400ms; --dur-reveal:800ms;
}