/* ==========================================================================
 * Design Tokens - 木古内町国保病院
 * CSS Custom Properties (デザイントークン)
 *
 * 設計方針:
 *   - 函館医療センターの美学（オフホワイト基調・余白重視）
 *   - 北海道医療大学のアクセントカラー活用
 *   - WCAG 2.2 AA コントラスト比準拠
 *   - 8px グリッドベースのスペーシング
 * ========================================================================== */
:root {
  /* ライトモード固定 */
  color-scheme: light;

  /* =======================================================================
   * Colors
   * ======================================================================= */

  /* プライマリ RGB（オーバーレイ用） */
  --color-primary-rgb: 18, 115, 196;

  /* ブランド主色（critical.css と同値。採用帯など tokens 単独読込でも欠落させない） */
  --color-primary: #1273c4;

  /* プライマリホバー / 押下（tint 体系） */
  --color-primary-hover: #0e5c9e;
  --color-primary-active: #0a4a80;

  /* プライマリダーク — カテゴリテキスト・強調ラベル */
  --color-primary-dark: #002261;

  /* プライマリ淡色 / ティント（背景・選択・カードヘアライン） */
  --color-primary-light: #eaf4fe;
  --color-primary-tint: #eaf4fe;
  --color-primary-tint-strong: #d4e9fb;

  /* ブランドアクセント — 清潔感のあるティール寄りシアン（装飾） */
  --color-brand-accent: #2ea6f7;

  /* サイトアクセント — お知らせバッジ・FAQアイコン・CTA装飾（オレンジ系） */
  --color-accent: #e67e22;
  --color-accent-bg: #fef3e6;

  /* アクセントホバー */
  --color-brand-accent-hover: #1785d6;

  /* アクセント淡色 — バッジ背景・診療案内カテゴリ */
  --color-brand-accent-light: #eaf4fe;

  /* アクセントダーク — バッジテキスト */
  --color-brand-accent-dark: #002261;

  /* ページ背景 — オフホワイト（函館医療センター美学） */
  --color-background: #f8f7f6;

  /* 純白 — ヒーローテキスト・テーブルヘッダー等 */
  --color-white: #ffffff;

  /* カード・タブ・モーダル等の表面背景 */
  --color-surface: #ffffff;

  /* surface半透明バリアント（ヘッダー・フッターボーダー/ホバー用） */
  --color-surface-alpha-40: rgba(255, 255, 255, 0.4);
  --color-surface-alpha-20: rgba(255, 255, 255, 0.2);
  --color-surface-alpha-15: rgba(255, 255, 255, 0.15);

  /* 本文テキスト — 高コントラスト（on var(--color-background) → 15.4:1） */
  --color-text-main: #23221e;

  /* サブテキスト — 補助情報・日付・キャプション（on var(--color-white) → 5.7:1） */
  --color-text-sub: #6b6560;

  /* プレースホルダー・無効テキスト — 対白 5.05:1（WCAG AA） */
  --color-text-muted: #736e68;

  /* 本文寄り補助テキスト（診療科表・休診表示）— 対白 7.37:1（WCAG AAA） */
  --color-text-body-muted: #5a5550;

  /* リンクテキスト — プライマリと同系（本文4.5:1 以上） */
  --color-link: #0e5c9e;

  /* リンクホバー */
  --color-link-hover: #0a4a80;

  /* 区切り線・ボーダー */
  --color-border: #d6d3d0;

  /* 薄いボーダー — テーブル内罫線等 */
  --color-border-light: #eae8e6;

  /* ヘアライン（カード枠・区切り） */
  --color-border-hairline: rgba(35, 34, 30, 0.12);
  --border-hairline: 1px solid var(--color-border-hairline);

  /* 情報 — お知らせ・ニュースカテゴリ（on var(--color-white) → 4.5:1） */
  --color-info: #1976d2;

  /* 情報背景 */
  --color-info-light: #e8f4fc;

  /* エラー — フォームバリデーション・警告（on var(--color-white) → 5.0:1） */
  --color-error: #c62828;

  /* エラー背景 */
  --color-error-light: #fdecea;

  /* 成功 — 完了通知・ステータス（on var(--color-white) → 4.6:1） */
  --color-success: #2e7d32;

  /* 成功背景 */
  --color-success-light: #e8f5e9;

  /* 警告 — 注意喚起（on var(--color-white) → 装飾用、テキストには --color-text-main を使用） */
  --color-warning: #f9a825;

  /* 警告背景 */
  --color-warning-light: #fff8e1;

  /* 緊急度背景（トリアージ印刷用） */
  --color-urgency-high: #fff3e0;
  --color-urgency-critical: #ffebee;

  /* 採用CTA — リクルート専用アクセント（目立つオレンジ系） */
  --color-recruit-cta: #e65100;

  /* 採用CTAホバー */
  --color-recruit-cta-hover: #bf4400;

  /* 採用CTA淡色 — バッジ背景・採用カテゴリ */
  --color-recruit-cta-light: #fff3e0;

  /* 採用アクセント（ティール/シアン）— 各職種ページの装飾 */
  --color-accent-teal: #4dd0e1;
  --color-accent-teal-dark: #008080;

  /* 看護部門カラー — ピンク系 */
  --color-nurse-primary: #e91e63;
  --color-nurse-primary-dark: #c2185b;
  --color-nurse-bg-pink: #fce4ec;

  /* コメディカル部門カラー — パープル系 */
  --color-comedical-primary: #6a1b9a;
  --color-comedical-primary-dark: #4a148c;

  /* 医師部門カラー — ネイビー＋ゴールド */
  --color-doctor-navy: #1a365d;
  --color-doctor-navy-light: #2d4a7c;
  --color-doctor-gold: #c9a227;

  /* 危険・緊急 — 救急・緊急連絡（on var(--color-white) → 5.9:1） */
  --color-danger: #dc3545;

  /* 危険ホバー */
  --color-danger-hover: #c82333;

  /* 危険淡色 — 背景 */
  --color-danger-light: #f8d7da;

  /* アクセントグリーン — CTA・ステータス・装飾（ミントグリーン系） */
  --color-accent-green: #48bb8f;
  --color-accent-green-hover: #3da87d;

  /* スケジュールCTA — 外来日程ボタン（グリーン系） */
  --color-schedule-cta: #5ebb8f;
  --color-schedule-cta-hover: #4da87e;

  /* AI問診CTA — AI問診ボタン（アンバー系） */
  --color-ai-cta: #e8a458;
  --color-ai-cta-hover: #c9833a;

  /* SNSブランドカラー */
  --color-sns-line: #06c755;
  --color-sns-instagram: #e1306c;
  --color-sns-x: #1d1d1f;
  --color-sns-youtube: #ff0000;
  --color-sns-facebook: #1877f2;

  /* ナビボタン — アクセス強調（エメラルド） */
  --color-nav-access-hover: #059669;

  /* ナビボタン — スケジュール強調（ブラウン〜オレンジ） */
  --color-nav-schedule: #a5500f;
  --color-nav-schedule-hover: #ea580c;

  /* 予約CTA — 診療予約ボタン（ヘッダー青と区別するティール系） */
  --color-reservation-cta: #00897B;
  --color-reservation-cta-hover: #00695C;

  /* S-9: primary-50 背景 (#E8F0FA) 上の Material Symbols — WCAG AA 4.5:1 */
  --color-sidebar-icon-on-tint: #0e5c9e;
  --color-sidebar-arrow-on-tint: #6b6560;

  /* オーバーレイ背景 — モーダル・ダイアログ背面 */
  --color-overlay: rgba(0, 0, 0, 0.5);

  /* オーバーレイグラデーション — ヒーロー画像上 */
  --color-overlay-light: hsl(0 0% 0% / 0.3);
  --color-overlay-dark: hsl(0 0% 0% / 0.5);

  /* テキストシャドウ — on image */
  --shadow-text: 0 2px 8px hsl(0 0% 0% / 0.4);
  --shadow-text-sm: 0 1px 4px hsl(0 0% 0% / 0.3);

  /* =======================================================================
   * Typography
   * ======================================================================= */

  /* ベースフォントファミリー */
  --font-family-base: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;

  /* 英字フォント — 見出し・装飾テキスト */
  --font-family-en: "Inter", "Noto Sans JP", sans-serif;

  /* 等幅フォント — コード表示等 */
  --font-family-mono: "Source Code Pro", "Consolas", monospace;

  /* フォントサイズ — 和文最適 type scale（本文 16px 以上を保証） */
  --font-size-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);      /* キャプション ~12–13px */
  --font-size-sm: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);      /* 補助 ~13–14px */
  --font-size-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);        /* 本文 ~16–17px */
  --font-size-md: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);        /* 強め本文 ~17–18px */
  --font-size-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);        /* h4 ~18–20px */
  --font-size-xl: clamp(1.25rem, 1.12rem + 0.6vw, 1.5rem);          /* h3 ~20–24px */
  --font-size-xxl: clamp(1.5rem, 1.28rem + 1.1vw, 2rem);            /* h2/h1 ~24–32px */
  --font-size-caption: var(--font-size-xs);
  --font-size-h4: var(--font-size-lg);
  --font-size-h3: var(--font-size-xl);
  --font-size-h2: var(--font-size-xxl);
  --font-size-h1: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);

  /* フォントウェイト */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* 行間 — 本文 1.7〜1.8 */
  --line-height-tight: 1.35;   /* 見出し */
  --line-height-normal: 1.75;  /* 本文 */
  --line-height-relaxed: 1.85; /* 医療情報等の可読性重視 */

  /* 字間 — 和文やや広め / 欧文・数字はタイト寄り */
  --letter-spacing-tight: -0.01em;
  --letter-spacing-normal: 0.02em;
  --letter-spacing-wide: 0.08em;
  --font-feature-settings: "palt" 1, "kern" 1;

  /* 本文の理想行長（40〜46em） */
  --text-width: 42em;
  --text-width-narrow: 36em;
  --text-width-wide: 46em;

  /* =======================================================================
   * Spacing — 正規スケール --space-1..8（4/8/12/16/24/32/48/64px）
   * 既存 --spacing-* は互換エイリアスとして維持
   * ======================================================================= */

  --spacing-unit: 8px;
  --space-1: 4px;    /* xs */
  --space-2: 8px;    /* sm */
  --space-3: 12px;   /* ms */
  --space-4: 16px;   /* md */
  --space-5: 24px;   /* lg */
  --space-6: 32px;   /* xl */
  --space-7: 48px;   /* xxl */
  --space-8: 64px;   /* xxxl */

  --spacing-xs: var(--space-1);
  --spacing-sm: var(--space-2);
  --spacing-ms: var(--space-3);
  --spacing-md: var(--space-4);
  --spacing-lg: var(--space-5);
  --spacing-xl: var(--space-6);
  --spacing-xxl: var(--space-7);
  --spacing-xxxl: var(--space-8);

  /* セクション縦リズム（ページ共通） */
  --section-space-y: var(--space-7);
  --section-space-y-lg: var(--space-8);
  --card-padding: var(--space-4);
  --card-gap: var(--space-3);

  /* Fluid Spacing（ビューポート連動） */
  --space-fluid-xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.5rem);
  --space-fluid-sm: clamp(0.5rem, 0.4rem + 0.4vw, 0.75rem);
  --space-fluid-md: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);
  --space-fluid-lg: clamp(1rem, 0.75rem + 1.5vw, 2.5rem);
  --space-fluid-xl: clamp(1.5rem, 1rem + 2vw, 4rem);
  --space-fluid-section: clamp(2rem, 1.5rem + 3vw, 6rem);

  /* ウェアラブル用スペーシング */
  --space-watch-xs: 0.125rem;  /*  2px */
  --space-watch-sm: 0.25rem;   /*  4px */
  --space-watch-md: 0.5rem;    /*  8px */
  --space-watch-lg: 0.75rem;   /* 12px */

  /* ウェアラブル用フォントサイズ（H-04: 本文・警告の下限を13pxへ） */
  --font-watch-xs: 0.8125rem;  /* 13px */
  --font-watch-sm: 0.8125rem;  /* 13px */
  --font-watch-md: 0.875rem;   /* 14px */
  --font-watch-lg: 1rem;       /* 16px */

  /* H-04: /wearable/ ダッシュボード専用（px 固定 — root rem 縮小の影響を受けない） */
  --font-hd-caption: 13px; /* 本文・警告・ラベル下限 */
  --font-hd-body: 13px;
  --font-hd-label: 13px;
  --font-hd-num: 16px;     /* 主要数値 */
  --font-hd-num-lg: 18px;
  --hd-touch-min: 44px;

  /* =======================================================================
   * Border
   * ======================================================================= */

  --border-width: 1px;
  --border-width-hairline: 1px;
  --border-width-thick: 2px;

  /* 角丸 — カード 12px / コントロール 8px */
  --radius-sm: 4px;     /* バッジ・小パーツ */
  --radius-control: 8px; /* ボタン・入力 */
  --radius-md: var(--radius-control);
  --radius-card: 12px;  /* 統一カード */
  --radius-lg: 16px;    /* ダイアログ・大パネル */
  --radius-xl: 24px;    /* 大型カード・ヒーロー装飾 */
  --radius-full: 9999px;

  /* =======================================================================
   * Shadow — flat（強い影・ネオン禁止）
   * ======================================================================= */

  --shadow-flat: none;
  --shadow-card: 0 1px 2px rgba(35, 34, 30, 0.06);
  --shadow-card-hover: 0 2px 8px rgba(35, 34, 30, 0.08);
  --shadow-card-hover-lg: 0 4px 12px rgba(35, 34, 30, 0.1);
  --shadow-dialog: 0 8px 24px rgba(35, 34, 30, 0.12);
  --shadow-xl: 0 12px 32px rgba(35, 34, 30, 0.12);
  --shadow-fab: 0 2px 8px rgba(35, 34, 30, 0.12);
  --shadow-header: 0 1px 0 var(--color-border-hairline);

  /* =======================================================================
   * Lux D1 — additive elevation / type / gradient / radius / motion
   * TASK-DESIGN-LUX-D1（既存 --shadow-* / --font-size-* / --radius-* は維持）
   * --color-primary は :root 先頭で定義（critical.css と同値 #1273c4）
   * ======================================================================= */

  /* Elevation（上品な多層影・ネオン禁止） */
  --elevation-1: 0 1px 2px rgba(35, 34, 30, 0.04), 0 2px 6px rgba(18, 115, 196, 0.04);
  --elevation-2: 0 1px 2px rgba(35, 34, 30, 0.04), 0 4px 12px rgba(18, 115, 196, 0.06);
  --elevation-3: 0 2px 4px rgba(35, 34, 30, 0.05), 0 8px 20px rgba(18, 115, 196, 0.08);
  --elevation-4: 0 4px 8px rgba(35, 34, 30, 0.06), 0 16px 32px rgba(18, 115, 196, 0.1);
  --elevation-hover: 0 4px 10px rgba(35, 34, 30, 0.07), 0 12px 28px rgba(18, 115, 196, 0.1);

  /* Display / heading aliases（既存 --font-size-h* は維持） */
  --fs-display: clamp(2rem, 1.55rem + 2.2vw, 3rem);
  --fs-h1: var(--font-size-h1);
  --fs-h2: var(--font-size-h2);
  --fs-h3: var(--font-size-h3);
  --fs-h4: var(--font-size-h4);
  --lh-heading: 1.3;
  --lh-body: 1.8;
  --letter-spacing-display: 0.04em;
  /* --font-feature-settings / --text-width は既存 Typography 節を流用 */

  /* Brand gradient（ヒーロー帯・主役CTA・フィーチャー見出しに限定使用） */
  --gradient-brand: linear-gradient(
    135deg,
    rgb(var(--color-primary-rgb)) 0%,
    var(--color-brand-accent) 100%
  );
  --gradient-brand-soft: linear-gradient(
    180deg,
    rgba(var(--color-primary-rgb), 0.55) 0%,
    rgba(0, 34, 97, 0.4) 100%
  );
  --gradient-brand-overlay: linear-gradient(
    to top,
    rgba(0, 34, 97, 0.62) 0%,
    rgba(var(--color-primary-rgb), 0.22) 45%,
    transparent 78%
  );

  /* Surface tints（セクション交互・AA担保の淡色面） */
  --surface-tint-primary: var(--color-primary-tint);
  --surface-tint-primary-strong: var(--color-primary-tint-strong);
  --surface-tint-accent: var(--color-accent-bg);
  --surface-tint-soft: #f3f6fa;
  --surface-tint-info: var(--color-info-light);

  /* Radius lux defaults（既存 --radius-card:12 / --radius-control:8 は維持） */
  --radius: 16px;                 /* lux カード基準 */
  --radius-control-lux: 10px;     /* lux コントロール基準 */

  /* Motion（prefers-reduced-motion で無効化） */
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --motion-slow: 400ms;
  --ease-overshoot: cubic-bezier(0.34, 1.4, 0.64, 1);
  /* --ease-out は既存 Interaction 節を流用 */

  /* =======================================================================
   * Portal (Phase 2) — section heads + card shells
   * Medium M-01: D1 トークンへ接続（見た目のみ・機能不変）
   * ======================================================================= */

  --portal-section-eyebrow-size: var(--font-size-caption);
  --portal-section-eyebrow-tracking: var(--letter-spacing-wide);
  --portal-section-title-size: var(--fs-h3);
  --portal-section-lead-size: var(--font-size-sm);
  --portal-section-head-gap: var(--space-4);

  --portal-card-radius: var(--radius);
  --portal-card-border: var(--border-hairline);
  --portal-card-shadow: var(--elevation-1);
  --portal-card-shadow-hover: var(--elevation-hover);
  --portal-card-padding: var(--space-4);
  --portal-card-min-height: 7.5rem;
  --portal-grid-gap: var(--space-4);

  /* セクション縦・横リズム（ガイド／お知らせ等） */
  --portal-section-pad-y: clamp(2.5rem, 5vw, 4rem);
  --portal-section-pad-x: clamp(1rem, 4vw, 2.5rem);

  /* =======================================================================
   * Hover / Interaction (統一デザイントークン)
   * ======================================================================= */

  /* ボタンリフト — 控えめ（flat 基調） */
  --hover-lift-sm: translateY(-1px);

  /* カード・フィーチャーリフト — 標準 */
  --hover-lift-md: translateY(-2px);

  /* アクティブ（タッチ）フィードバック */
  --active-scale: scale(0.97);

  /* ホバートランジション — 統一のキュービックベジエ */
  --transition-hover: 0.25s cubic-bezier(0.4, 0, 0.2, 1);

  /* イージング関数 — 個別利用向け */
  --ease-default: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* =======================================================================
   * Transition
   * ======================================================================= */

  --transition-fast: 150ms ease;    /* ホバー・フォーカス */
  --transition-normal: 250ms ease;  /* パネル開閉・フェード */
  --transition-slow: 400ms ease;    /* モーダル・ページ遷移 */

  /* =======================================================================
   * Breakpoints（ドキュメント＋JS参照用。@media では直値を使用）
   * 共通セット: 480 / 768 / 1024 / 1280
   * ======================================================================= */
  --bp-xs: 480px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* =======================================================================
   * Z-index
   * ======================================================================= */

  --z-subnav: 100;         /* ページ内サブナビ */
  --z-fab: 500;            /* 音声FABボタン */
  --z-dropdown: 999;       /* ドロップダウンメニュー */
  --z-header: 1000;        /* 固定ヘッダー */
  --z-overlay: 1001;       /* オーバーレイ背景 */
  --z-bottom-bar: 1001;    /* モバイル下部ナビ（H-02） */
  --z-cookie: 1100;        /* Cookie同意（下部ナビの上、モーダル未満） */
  --z-mobile-menu: 9999;   /* SPメニューパネル */
  --z-dialog: 10000;       /* ダイアログ・モーダル */
  --z-toast: 10001;        /* トースト通知（最前面） */

  /* =======================================================================
   * Component-specific tokens
   * ======================================================================= */

  /* タッチターゲット最小サイズ — WCAG 2.2 AA (44px以上) */
  --touch-target-min: 44px;
  --control-height: 44px;
  --control-height-sm: 36px;
  --control-height-lg: 52px;

  /* コンテンツ最大幅（ブレークポイント xl と整合） */
  --content-max-width: 1280px;
  --content-width: var(--content-max-width);
  --home-section-inner-max: var(--content-max-width);
  --home-section-inner-pad: clamp(var(--space-4), 4vw, var(--space-6));

  /* ヘッダー高さ (saikazo-header.css / critical.css と同期) */
  --header-utility-height: 48px;
  --header-main-height: 50px;
  --header-height: calc(var(--header-utility-height) + var(--header-main-height));

  /* モバイル下部固定レイヤー占有高（H-02: cookie / speech と共有） */
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --bottom-bar-height: 3.5rem;
  --bottom-bar-occupied: calc(var(--bottom-bar-height) + var(--safe-area-bottom));
  /* R-U C5 alias (doc name → existing token) */
  --bottom-nav-height: var(--bottom-bar-height);
  --z-floating: var(--z-fab, 500);
  --cookie-consent-height: 0px; /* JS が表示時に実測値をセット */

  /* サイドバー幅 */
  --sidebar-width: 280px;

  /* グレースケール（汎用） */
  --color-gray-50: #fafafa;
  --color-gray-100: #f5f5f5;
  --color-gray-200: #eeeeee;
  --color-gray-300: #e0e0e0;
  --color-gray-400: #bdbdbd;
  --color-gray-500: #9e9e9e;
  --color-gray-600: #757575;
  --color-gray-700: #616161;
  --color-gray-800: #424242;
  --color-gray-900: #212121;

  /* プライマリ中間色 */
  --color-primary-50: #E8F0FA;
  --color-primary-100: #C5D9F2;
  --color-primary-200: #a3c4e8;

  /* 装飾アクセント — フォーカスインジケータ・バッジ装飾 */
  --color-accent-vivid: #ff1f54;
  --color-accent-vivid-dark: #d91a47;

  /* 外部サービスブランド色 */
  --color-line-brand: #06c755;

  /* 管理画面フォーカス色 — Django admin riched-text-editor用 */
  --color-admin-focus: #417690;

  /* =======================================================================
   * Aliases — 未定義参照を既存トークンにマッピング
   *
   * 各CSSファイルで使われている variant 名を正規トークンに解決する。
   * 新規ファイルでは正規名を直接使用すること。
   * ======================================================================= */

  /* --- テキストカラー エイリアス --- */
  --color-text:             var(--color-text-main);
  --color-text-light:       var(--color-text-sub);
  --color-text-primary:     var(--color-text-main);
  --color-text-secondary:   var(--color-text-sub);
  --color-text-main-light:  var(--color-text-sub);
  --color-text-main-muted:  var(--color-text-muted);
  --color-text-on-primary:  var(--color-white);
  --color-text-tertiary:    var(--color-text-muted);
  --color-dark:             var(--color-text-main);

  /* --- 背景カラー エイリアス --- */
  --color-bg-sub:           var(--color-background);
  --color-bg-subtle:        var(--color-gray-50);
  --color-bg-gray:          var(--color-gray-100);
  --color-bg-secondary:     var(--color-background);
  --color-bg-primary:       var(--color-surface);
  --color-bg-tertiary:      var(--color-gray-200);
  --color-background-white: var(--color-surface);
  --color-background-light: var(--color-primary-light);
  --color-background-gray:  var(--color-background);
  --color-surface-alt:      var(--color-gray-50);
  --color-surface-sub:      var(--color-background);
  --color-bg-cream:         #fdf8f3;
  --color-bg-beige:         #f6f9fc;

  /* --- アクセント／装飾カラー --- */
  --color-accent-coral:     #ff9574;
  --color-teal:             var(--color-accent-teal);
  --color-teal-light:       #b2ebf2;
  --color-focus:            #2563eb;
  --color-secondary:        #ff6f00;
  --color-caution:          #fd7e14;

  /* --- セマンティック（ステータス）エイリアス --- */
  --color-danger-bg:        var(--color-danger-light);
  --color-danger-text:      var(--color-danger);
  --color-info-bg:          var(--color-info-light);
  --color-info-text:        var(--color-info);
  --color-success-bg:       var(--color-success-light);
  --color-success-dark:     #1b5e20;
  --color-warning-bg:       var(--color-warning-light);
  --color-warning-text:     #e65100;
  --color-primary-bg:       var(--color-primary-light);
  --color-error-bg:         var(--color-error-light);

  /* --- シャドウ エイリアス --- */
  --shadow-sm:              var(--shadow-card);
  --shadow-md:              var(--shadow-card-hover);
  --shadow-lg:              var(--shadow-xl);
  --shadow-card-sm:         var(--shadow-card);
  --shadow-card-md:         var(--shadow-card-hover);
  --shadow-card-lg:         var(--shadow-card-hover-lg);

  /* --- スペーシング エイリアス --- */
  --spacing-xxs:            2px;
  --spacing-2xs:            var(--space-1);
  --spacing-2xl:            var(--space-7);
  --space-xs:               var(--space-1);
  --space-sm:               var(--space-2);
  --space-md:               var(--space-4);
  --space-lg:               var(--space-5);
  --space-xl:               var(--space-6);
  --space-2xs:              var(--space-1);
  --space-2xl:              var(--space-7);
  --space-3xl:              var(--space-8);

  /* --- タイポグラフィ エイリアス --- */
  --font-weight-semibold:   600;
  --font-size-xxxl:         var(--font-size-xxl);
  --font-size-2xs:          var(--font-size-xs);
  --font-size-xxs:          var(--font-size-xs);
  --font-sm:                var(--font-size-sm);
  --font-xs:                var(--font-size-xs);

  /* --- ボーダー／半径 エイリアス --- */
  --radius-pill:            var(--radius-full);
  --rct-border:             var(--color-border);
  --border:                 var(--color-border);
  --border-color:           var(--color-border);

  /* --- レイアウト エイリアス --- */
  --container-max-width:    var(--content-max-width);
  --container-xxl:          var(--content-max-width);
  --content-width-mobile:   100%;
  --content-width-tablet:   calc(var(--content-max-width) - 4rem);
  --content-width-desktop:  var(--content-max-width);
  --header-height-mobile:   60px;
  --header-mobile-height:   60px;
  --header-accent:          var(--color-primary);
  --header-accent-light:    var(--color-primary-light);

  /* --- トランジション エイリアス --- */
  --ease-default-out:       var(--ease-out);

  /* --- インタラクション --- */
  --touch-target-recommended: 48px;

  /* --- Z-Index エイリアス --- */
  --z-banner:               50;
  --z-modal:                var(--z-dialog);

  /* --- 短縮名エイリアス (PWA/admin/レガシー) --- */
  --primary:                var(--color-primary);
  --surface:                var(--color-surface);
  --text:                   var(--color-text-main);
  --warning:                var(--color-warning);
}

/* Lux D1: reduced-motion — 時間トークンを実質無効化（見た目は既存コンポーネント依存） */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast: 0.01ms;
    --motion-base: 0.01ms;
    --motion-slow: 0.01ms;
    --ease-overshoot: linear;
  }
}

/* Dark Mode — 無効化済み（ライトモード固定） */

/* ==========================================================================
 * High Contrast Mode — data-colormode="high-contrast"
 * WCAG AAA 7:1 コントラスト比を確保
 * ========================================================================== */
:root[data-colormode="high-contrast"] {
  --color-primary: #0055cc;
  --color-primary-hover: #003d99;
  --color-primary-light: #e6f0ff;
  --color-brand-accent: #006666;
  --color-brand-accent-hover: #004d4d;
  --color-brand-accent-light: #e0f5f5;
  --color-brand-accent-dark: #004d4d;

  --color-background: #ffffff;
  --color-white: #ffffff;
  --color-surface: #f0f0f0;
  --color-surface-alpha-40: rgba(240, 240, 240, 0.95);
  --color-surface-alpha-20: rgba(240, 240, 240, 0.6);
  --color-surface-alpha-15: rgba(240, 240, 240, 0.45);
  --color-text-main: #000000;
  --color-text-sub: #1a1a1a;
  --color-text-muted: #333333;
  --color-link: #0033aa;
  --color-link-hover: #001a66;

  --color-border: #333333;
  --color-border-light: #666666;

  --color-error: #cc0000;
  --color-error-light: #ffe6e6;
  --color-success: #006600;
  --color-success-light: #e6ffe6;
  --color-warning: #996600;
  --color-warning-light: #fff5cc;

  --color-recruit-cta: #cc3300;
  --color-recruit-cta-hover: #992200;
  --color-recruit-cta-light: #ffe6d9;

  --color-overlay: rgba(0, 0, 0, 0.8);
  --color-overlay-light: hsl(0 0% 0% / 0.5);
  --color-overlay-dark: hsl(0 0% 0% / 0.7);

  /* Calm theme (subpage cards/tables) — AS6.3 */
  --kiko-calm-border: #d8d6d1;
  --kiko-calm-shadow: 0 2px 10px rgba(26, 43, 63, 0.06);
  --kiko-calm-shadow-hover: 0 6px 18px rgba(26, 43, 63, 0.1);
  --kiko-calm-tint: #f3f6fa;

  --shadow-card: 0 0 0 2px var(--color-border);
  --shadow-card-hover: 0 0 0 3px var(--color-primary);
  --shadow-dialog: 0 0 0 3px var(--color-border);
  --shadow-text: none;
  --shadow-text-sm: none;

  color-scheme: light;
}