/* ============================================================
   タカハシ業務システム — デザイントークン (SSOT)
   画面 (app.css) と帳票 (print.css) が共通で参照する基礎値。
   `.claude/skills/takahashi-design/tokens/*` の正典トークンを本番に取り込んだもの。
   フォントは本番方針どおり OS 同梱 Noto Sans CJK JP を使う
   (Google Fonts CDN import は持ち込まない — Docker 画像に fonts-noto-cjk 同梱)。
   画面では intent を表す semantic alias (--surface-card / --text-heading /
   --color-primary / --font-mono) を参照し、生の値は直接使わない。
   ============================================================ */
:root {
  /* ---- フォント: JP システムスタック ---- */
  --tk-font-sans: "Noto Sans JP", "Noto Sans CJK JP", "Hiragino Sans",
    "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  --tk-font-mono: "Noto Sans Mono", "Noto Sans Mono CJK JP", "Consolas", monospace;

  /* ---- 文字サイズ: 低 IT リテラシー・高齢ユーザー前提で大きめ (18px) ---- */
  --tk-font-size: 18px;          /* root — ここから全てが rem で展開する */
  --tk-line: 1.6;

  /* 型スケール (rem, 18px 基準) */
  --tk-text-xs: 0.78rem;   /* 14px — 密なテーブルメタ */
  --tk-text-sm: 0.85rem;   /* 15px — キャプション / ユーザーチップ */
  --tk-text-base: 1rem;    /* 18px — 本文 */
  --tk-text-lg: 1.15rem;   /* 21px — 数え取り進捗 / 強調 */
  --tk-text-h3: 1.25rem;   /* 22px */
  --tk-text-h2: 1.5rem;    /* 27px — セクション見出し (基本情報 / 明細) */
  --tk-text-h1: 2rem;      /* 36px — ページタイトル */
  --tk-font-size-small: var(--tk-text-sm); /* 後方互換 */

  /* ウェイト */
  --tk-weight-regular: 400;
  --tk-weight-medium: 500;
  --tk-weight-semibold: 600;
  --tk-weight-bold: 700;

  /* ---- ブランド ---- */
  --tk-brand: #1a5fa8;          /* 主要アクション / リンク / アクセント */
  --tk-brand-dark: #134a85;     /* hover / pressed */
  --tk-brand-tint: #eef4fb;     /* 薄い塗り: 進捗カラウト / アクティブ nav */
  --tk-brand-tint-2: #f2f6fb;   /* さらに薄い: ゼブラ行 */

  /* ---- セカンダリ (中立スレートのアクション) ---- */
  --tk-secondary: #515c6b;      /* 「受注一覧 / 品目 / キャンセル」ボタン */
  --tk-secondary-dark: #3f4855;

  /* ---- セマンティック ---- */
  --tk-danger: #b3261e;
  --tk-danger-tint: #fdecea;
  --tk-success: #1e7e34;
  --tk-success-tint: #eafaf0;   /* 入力済み数え取り行 */
  --tk-warning: #9a6700;
  --tk-warning-tint: #fff8e1;   /* 注記 / 要対応行 */

  /* ---- ニュートラル (スレート) ---- */
  --tk-white: #ffffff;
  --tk-text: #2d333b;           /* 本文 */
  --tk-heading: #1b2733;        /* 見出し (より濃い) */
  --tk-muted: #646b79;          /* キャプション / 補助メタ */
  --tk-border: #e1e6ed;         /* ヘアライン / カード枠 */
  --tk-border-strong: #c6cdd8;  /* 入力枠 / テーブルヘッダ罫 */
  --tk-surface: #ffffff;        /* カード */
  --tk-surface-sunken: #f7f9fc; /* カード背面のページ地 */

  /* ---- スペーシング (基本単位 1rem = 18px) ---- */
  --tk-space: 1rem;
  --tk-space-2xs: 0.25rem;       /* 4.5px */
  --tk-space-xs: 0.5rem;         /* 9px */
  --tk-space-sm: 0.8rem;         /* ~14px — ツールバー gap / ボタン padding */
  --tk-space-md: 1rem;           /* 18px */
  --tk-space-lg: 1.5rem;         /* 27px — 主要ブロック間 */
  --tk-space-xl: 3rem;           /* 54px — 説明書のセクション分け */

  /* ---- 角丸 ---- */
  --tk-radius: 6px;              /* ブランド: カード / カラウト / トースト */
  --tk-radius-sm: 4px;           /* 入力 / ボタン (Pico 既定の手触り) */
  --tk-radius-pill: 999px;       /* ステータスピル / タグ */

  /* ---- 枠 ---- */
  --tk-border-width: 1px;
  --tk-accent-bar: 5px;          /* カラウトの左アクセントバー */

  /* ---- エレベーション ---- */
  --tk-shadow-card: 0 1px 3px rgb(27 39 51 / 0.06);   /* 静止カード */
  --tk-shadow-raised: 0 4px 16px rgb(0 0 0 / 0.15);   /* 説明書スクショ */
  --tk-shadow-toast: 0 4px 14px rgb(0 0 0 / 0.25);    /* 固定トースト */

  /* ---- レイアウト ---- */
  --tk-container: 1140px;        /* Pico .container 最大幅 */
  --tk-card-min: 18rem;          /* ホームのダッシュボードカード最小幅 */

  /* ---- 帳票 (WeasyPrint) — 画面とは別の formal な紙の見た目 ---- */
  --tk-print-font-size: 10.5pt;
  --tk-print-border: 0.6pt solid #333;
  --tk-print-ink: #111;          /* 近黒の本文 / 罫 */
  --tk-print-rule: #333;         /* セクションバー */
  --tk-print-fill: #eee;         /* テーブルヘッダ塗り */
  --tk-print-muted: #555;        /* フッタ */

  /* ============================================================
     セマンティック alias — 画面 / コンポーネントはこちらを参照する
     ============================================================ */
  --color-primary: var(--tk-brand);
  --color-primary-hover: var(--tk-brand-dark);
  --color-secondary: var(--tk-secondary);
  --color-secondary-hover: var(--tk-secondary-dark);
  --color-link: var(--tk-brand);

  --text-body: var(--tk-text);
  --text-heading: var(--tk-heading);
  --text-muted: var(--tk-muted);
  --text-on-brand: var(--tk-white);

  --surface-page: var(--tk-white);
  --surface-card: var(--tk-surface);
  --surface-sunken: var(--tk-surface-sunken);
  --surface-accent: var(--tk-brand-tint);

  --border-default: var(--tk-border);
  --border-input: var(--tk-border-strong);

  --status-danger: var(--tk-danger);
  --status-success: var(--tk-success);
  --status-warning: var(--tk-warning);

  --font-body: var(--tk-font-sans);
  --font-mono: var(--tk-font-mono);

  --type-page-title: var(--tk-weight-bold) var(--tk-text-h1) / 1.25 var(--tk-font-sans);
  --type-section: var(--tk-weight-bold) var(--tk-text-h2) / 1.3 var(--tk-font-sans);
  --type-body: var(--tk-weight-regular) var(--tk-text-base) / var(--tk-line) var(--tk-font-sans);

  --space-inline: var(--tk-space-sm);
  --space-stack: var(--tk-space-lg);
  --radius-card: var(--tk-radius);
  --radius-control: var(--tk-radius-sm);
  --shadow-card: var(--tk-shadow-card);
}