/* ============================================================
   松田歯科OS デザイントークン
   技工物到着管理システム / Design Charter v2 準拠

   このファイルは「値」のみを定義する。見た目の実装は style.css。
   新しい画面を追加するときは、必ずここのトークンだけを使う。
   生の色コード・生のpx値をコンポーネント側へ直接書かない。
   ============================================================ */

:root {
  /* --------------------------------------------------------
     1. カラー / 基盤
     Charter⑥: Warm White・Deep Navy・Calm Blue・Neutral Gray
     -------------------------------------------------------- */
  --color-canvas: #f4f6fa; /* 画面全体の背景 */
  --color-surface: #ffffff; /* カード・パネルの背景 */
  --color-surface-sunken: #f8fafc; /* カード内の一段沈んだ領域 */

  --color-ink: #16202c; /* 本文 */
  --color-ink-strong: #0f2c4d; /* 見出し(Deep Navy) */
  --color-ink-muted: #5f6b7a; /* 補助説明 */
  --color-ink-subtle: #7b8794; /* ラベル・単位 */
  --color-ink-inverse: #ffffff;

  --color-border: #dfe5ee; /* 通常の境界線 */
  --color-border-strong: #c6d0dd; /* 入力欄など、境界を明示したい箇所 */

  /* --------------------------------------------------------
     2. カラー / ブランド（Calm Blue）
     主要操作は常にこの青。状態色とは役割を分ける。
     -------------------------------------------------------- */
  --color-primary: #1565c0;
  --color-primary-hover: #1257a5;
  --color-primary-active: #0d47a1;
  --color-primary-soft: #e8f1fc; /* 淡い背景 */
  --color-primary-softer: #f2f7fd;
  --color-primary-border: #b9d4f2;

  /* --------------------------------------------------------
     3. カラー / 状態（spec §18・Charter⑥）
     色だけで伝えないため、必ずアイコン＋文字と併用する。
     -------------------------------------------------------- */

  /* 受付入力待ち（青系） */
  --state-waiting-fg: #0d47a1;
  --state-waiting-bg: #e8f1fc;
  --state-waiting-border: #9cc3ec;

  /* 到着待ち＝内部状態ordered（黄系／Amber） */
  --state-ordered-fg: #8a5300;
  --state-ordered-bg: #fff5e2;
  --state-ordered-border: #e6b25e;

  /* 要確認（赤系） */
  --state-alert-fg: #a3231b;
  --state-alert-bg: #fdecea;
  --state-alert-border: #efa9a2;

  /* 到着済み（緑系） */
  --state-done-fg: #17612a;
  --state-done-bg: #e7f5ea;
  --state-done-border: #92cba2;

  /* --------------------------------------------------------
     4. 余白（8pxベース）
     4pxは微調整用の半ステップ。原則は8の倍数を使う。
     -------------------------------------------------------- */
  --space-0: 0;
  --space-1: 0.25rem; /*  4px */
  --space-2: 0.5rem; /*   8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /*    16px */
  --space-5: 1.5rem; /*  24px */
  --space-6: 2rem; /*    32px */
  --space-7: 2.5rem; /*  40px */
  --space-8: 3rem; /*    48px */
  --space-9: 4rem; /*    64px */

  /* --------------------------------------------------------
     5. 角丸
     -------------------------------------------------------- */
  --radius-sm: 0.5rem; /*   8px  チップ・小要素 */
  --radius-md: 0.75rem; /* 12px  ボタン・入力欄 */
  --radius-lg: 1rem; /*    16px  カード */
  --radius-xl: 1.25rem; /* 20px  ダイアログ・大きなパネル */
  --radius-pill: 999px; /*       状態バッジ */

  /* --------------------------------------------------------
     6. 影（控えめ・階層表現のみに使う）
     -------------------------------------------------------- */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(16, 32, 44, 0.05);
  --shadow-md: 0 2px 8px rgba(16, 32, 44, 0.07);
  --shadow-lg: 0 16px 40px rgba(16, 32, 44, 0.18); /* ダイアログのみ */
  --shadow-focus: 0 0 0 3px rgba(21, 101, 192, 0.35);

  /* --------------------------------------------------------
     7. タイポグラフィ
     Charter⑨に従い固定pxを避け、clamp()で機種差を吸収する。
     -------------------------------------------------------- */
  --font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

  --fs-caption: clamp(0.8125rem, 0.25vw + 0.75rem, 0.9375rem); /* 13–15px 補足 */
  --fs-label: clamp(0.9375rem, 0.3vw + 0.85rem, 1.0625rem); /*  15–17px ラベル */
  --fs-body: clamp(1rem, 0.35vw + 0.9rem, 1.125rem); /*         16–18px 本文 */
  --fs-body-lg: clamp(1.125rem, 0.4vw + 1rem, 1.25rem); /*      18–20px 強調本文 */
  --fs-section: clamp(1.1875rem, 0.45vw + 1.05rem, 1.375rem); /* 19–22px 見出し */
  --fs-page: clamp(1.5rem, 0.7vw + 1.3rem, 1.875rem); /*        24–30px 画面名 */
  --fs-key: clamp(1.375rem, 0.6vw + 1.2rem, 1.625rem); /*       22–26px 患者ID */
  --fs-stat: clamp(1.75rem, 1vw + 1.5rem, 2.25rem); /*          28–36px 件数 */

  --lh-tight: 1.3;
  --lh-normal: 1.6;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* --------------------------------------------------------
     8. アイコン
     線アイコンのみ。サイズは文字に追従させる。
     -------------------------------------------------------- */
  --icon-sm: 1.125em;
  --icon-md: 1.375em;
  --icon-lg: 1.75em;
  --icon-stroke: 1.75;

  /* --------------------------------------------------------
     9. タップ領域（Charter⑫・Apple HIG準拠）
     -------------------------------------------------------- */
  --tap-min: 2.75rem; /*      44px 最低限 */
  --tap-comfortable: 3.5rem; /* 56px 通常のボタン */
  --tap-primary: 4rem; /*     64px 主要操作 */

  /* --------------------------------------------------------
     10. レイアウト
     -------------------------------------------------------- */
  --layout-max: 87.5rem; /* 1400px 大画面でも間延びさせない */
  --layout-gutter: clamp(var(--space-4), 2.5vw, var(--space-6));

  /* --------------------------------------------------------
     11. アニメーション
     業務アプリのため最小限。状態変化の気づきにのみ使う。
     -------------------------------------------------------- */
  --ease-standard: cubic-bezier(0.2, 0, 0.2, 1);
  --duration-fast: 120ms;
  --duration-normal: 200ms;
}

/* 動きを減らす設定の端末では、アニメーションを無効化する（Charter⑫） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}