/* ============================================================================
   SaaS工場 共通デザインキット — tokens.css (v1)
   色 = Radineer Design System v1 (Light) / 寸法 = POSplus theme/tokens.js (commit d51f1d0)

   「デザイナーが作った」印象の実体は色ではなく寸法と状態 (feedback_design_is_dimension_not_color)。
   ここに有限のスケールを置き、製品側の CSS はこの変数からしか選ばない。
   生の hex / px を製品 CSS に書くと、各製品の tests/design-boundary.test.mjs が落ちる。

   ★ダークテーマは持たない。prefers-color-scheme: dark を書くと、コントラスト未実測の配色が
     閲覧者の OS 設定次第で本番に出る (genba-36-guard で実際に出た)。html に data-theme="light" を固定する。
   ============================================================================ */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  /* ---- color: brand (Radineer DS) ---- */
  --ink: #0A1834;            /* 見出し・本文 */
  --navy: #12244A;           /* 上部バー・暗面 */
  --brand: #1E5BFF;          /* 単一アクセント。主ボタンの地とフォーカスだけに使う */
  --brand-hover: #1442C4;
  --brand-active: #0F349C;
  --brand-soft: #E8F0FF;     /* 選択中ナビ・情報ピルの地 */
  --brand-text: #1442C4;     /* リンク文字。--brand は brand-soft 上で 4.59 と余裕が無いので一段濃くする */
  --on-brand: #FFFFFF;
  --on-navy: #FFFFFF;
  --on-navy-muted: #B8C4D9;

  /* ---- color: neutral (青みバイアス) ---- */
  --bg: #FFFFFF;
  --surface: #F5F8FC;
  --surface-2: #EDF2F9;
  --line: #E1E8F2;           /* 区切り線 (装飾。非文字コントラストの対象外) */
  --line-strong: #71819C;    /* 入力欄の枠。白 3.95 / surface-2 3.51 / brand-soft 3.45 (非文字 3:1 以上。#7D8CA6 は brand-soft 上で 2.97 だった) */
  --muted: #556680;          /* 補足文。白地 5.84 / surface-2 地 5.19 */
  --neutral-soft: #EDF2F9;

  /* ---- color: semantic (状態表示専用。アクセントとは別枠) ---- */
  --ok: #12A150;       --ok-soft: #E5F5EC;   --ok-text: #0B7A3B;
  --warn: #B76E00;     --warn-soft: #FBF0DC; --warn-text: #8A5300;
  --crit: #D92D20;     --crit-soft: #FBE7E5; --crit-text: #B42318; --crit-active: #912018;
  --info-soft: #E8F0FF; --info-text: #1442C4;
  /* ok / warn は白地の文字に使えない (3.37 / 4.00)。文字は *-text を使う */

  /* ---- type: family ---- */
  --font-sans: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---- type: size 8段 (中間値を作らない) ---- */
  --fs-xs: 0.75rem;    /* 12 ピル・キャプション */
  --fs-sm: 0.8125rem;  /* 13 ラベル・表の見出し・補足 */
  --fs-md: 0.875rem;   /* 14 アプリ面の本文 */
  --fs-lg: 1rem;       /* 16 LP・文書の本文、入力値 */
  --fs-xl: 1.125rem;   /* 18 小見出し */
  --fs-2xl: 1.375rem;  /* 22 画面タイトル・節見出し */
  --fs-3xl: 1.75rem;   /* 28 ページ見出し */
  --fs-4xl: 2.25rem;   /* 36 LP ヒーロー */

  /* ---- type: weight 3段 ---- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* ---- type: line-height 4段 / letter-spacing 3段 ---- */
  --lh-tight: 1.25;    /* 大見出し */
  --lh-snug: 1.45;     /* 小見出し・ラベル・表 */
  --lh-normal: 1.7;    /* 本文 */
  --lh-relaxed: 1.85;  /* 長文 (規約・方針本文) */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.02em;   /* 12〜13px の小さい文字 */

  /* ---- space: 4px グリッド 9段 (名前は 4px の倍数) ---- */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ---- radius 3段 + pill ---- */
  --r-sm: 4px;         /* ピル以外の小部品・チェックボックス */
  --r-md: 8px;         /* ボタン・入力欄 */
  --r-lg: 12px;        /* カード・面 */
  --r-pill: 999px;

  /* ---- shadow 2段のみ ---- */
  --shadow-sm: 0 1px 2px rgba(10, 24, 52, 0.06), 0 1px 3px rgba(10, 24, 52, 0.04);
  --shadow-md: 0 2px 8px rgba(10, 24, 52, 0.08), 0 1px 3px rgba(10, 24, 52, 0.06);

  /* ---- motion ---- */
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --dur-slow: 240ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  /* ---- state ---- */
  --focus-color: #1E5BFF;  /* 白地 5.26 (非文字 3:1 以上) */
  --focus-width: 2px;
  --focus-offset: 2px;
  --disabled-opacity: 0.45;
  --touch-min: 44px;       /* タップ領域の下限 */

  /* ---- layout ---- */
  --w-content: 1080px;
  --w-prose: 720px;        /* 文書の1行 ≒ 45字 (16px) */
  --w-form: 440px;
  --w-nav: 224px;
  --header-h: 64px;
  --w-label: 160px;        /* 見出し列 (LP の「対象:」など) */
  --w-aside: 320px;        /* 事案詳細の右列 */
  --w-field-min: 200px;    /* 横に並べる入力欄の最小幅 */
  --w-card-min: 280px;     /* 自動で並べるカードの最小幅 */
  --w-row-main: 160px;     /* 一覧の行で名前が確保する幅 */

  /* ---- line ---- 名前は --bw-*。--border / --border-strong は legal.css が「色」として読む名前なので使わない */
  --bw-1: 1px;
  --bw-2: 2px;
  --underline-offset: 0.2em;

  /* ---- 選択中の表示 (影ではなく内側の線。影は --shadow-sm / --shadow-md の2段だけ) ---- */
  --indicator-start: inset 4px 0 0 #1E5BFF;
  --indicator-bottom: inset 0 -2px 0 #1E5BFF;
}