/* ==========================================================================
   design-tokens.css — デザイントークンの唯一の定義場所（Phase 1）
   --------------------------------------------------------------------------
   構成:
     1. プリミティブトークン   … 生の色・寸法値。直接参照せずセマンティック経由で使う
     2. セマンティックトークン … 役割ベース（--color-*, --shadow-*, --space-* 等）
        季節テーマ（[data-theme=...]）はこの層の差し替えのみで実現する
     3. 互換エイリアス        … 既存テンプレート/CSSが参照するレガシー変数名
        （--primary, --text, --border 等）をセマンティック層へ接続する
   --------------------------------------------------------------------------
   値は従来の base_sticky_header.html インライン<style> と app_refinement.css
   の重ね合わせ結果（カスケード適用後の実効値）をベースに整理している。
   意図的な変更は以下の 4 点（コントラスト是正 / テーマ色の反映）:
     - --color-text-muted: #667085 -> #5B6472（白背景 4.5:1 以上）
     - フォーカスリング: 透過 rgba(*, 0.22) -> 不透明 2px solid
     - ヘッダー帯: 明色に抜けるグラデーションをやめ、深色→中彩度で終端
       （帯全域で白文字 4.5:1 以上を確保）
     - --color-status-text: 淡色のステータス帯用の濃色テキストを新設
       （白文字を淡色帯に乗せない）
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. プリミティブトークン
   -------------------------------------------------------------------------- */
:root {
    /* neutral */
    --white: #ffffff;
    --gray-50: #f6f7f9;
    --gray-100: #f2f5f8;
    --gray-200: #d9e0e8;
    --gray-600: #5b6472;
    --gray-900: #111827;
    --gray-950: #0f172a;
    --slate-50: #f8fafc;

    /* brand / theme palette */
    --indigo-500: #6366f1;
    --indigo-600: #4f46e5;
    --indigo-700: #4338ca;
    --indigo-800: #3730a3;
    --pink-600: #be185d;
    --pink-700: #c0266f;
    --pink-800: #9f1656;
    --cyan-700: #0e7490;
    --cyan-800: #155e75;
    --amber-500: #f59e0b;
    --amber-700: #b45309;
    --amber-800: #92400e;

    /* feedback */
    --emerald-500: #10b981;
    --emerald-700: #047857;
    --green-600: #16a34a;
    --red-500: #ef4444;
    --blue-500: #3b82f6;

    /* spacing (4px 基準) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 32px;
    --space-8: 40px;
    --space-9: 48px;
    --space-10: 64px;

    /* typography */
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --line-height-tight: 1.25;
    --line-height-base: 1.5;
    --line-height-relaxed: 1.7;

    /* radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 999px;

    /* elevation */
    --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-2: 0 10px 28px rgba(16, 24, 40, 0.08);
    --shadow-3: 0 18px 44px rgba(16, 24, 40, 0.14);

    /* motion */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 300ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* layout */
    --container-max: 1400px;

    /* z-index（従来値を維持） */
    --z-header: 1100;
    --z-overlay: 1200;
    --z-overlay-panel: 1210;
    --z-drawer: 1300;
}

/* --------------------------------------------------------------------------
   2. セマンティックトークン（既定 = 従来の非テーマ時実効値）
   -------------------------------------------------------------------------- */
:root {
    --color-bg: var(--gray-50);
    --color-surface: var(--white);
    --color-surface-alt: var(--gray-100);
    --color-surface-soft: var(--slate-50);

    --color-text: var(--gray-900);
    --color-text-strong: var(--gray-950);
    --color-text-muted: var(--gray-600); /* 旧 #667085 -> #5B6472（コントラスト是正） */

    --color-primary: var(--indigo-600);
    --color-primary-hover: var(--indigo-800);
    --color-primary-contrast: var(--white);

    --color-border: var(--gray-200);
    --color-surface-border: var(--gray-200);
    --color-accent: var(--emerald-500);

    --color-danger: var(--red-500);
    --color-success: var(--green-600);
    --color-warning: var(--amber-500);
    --color-info: var(--blue-500);

    /* フォーカスリング: 不透明 2px solid（コントラスト是正） */
    --focus-ring-color: var(--indigo-600);
    --focus-ring: 2px solid var(--focus-ring-color);

    --color-badge-bg: #eef2ff;
    --color-badge-text: var(--indigo-700);

    --color-header-start: #4f46e5;
    --color-header-end: #7c3aed;
    --color-header-bg: linear-gradient(135deg, #312e81 0%, #4f46e5 55%, #7c3aed 100%);
    --color-header-border: rgba(49, 46, 129, 0.45);
    --color-header-text: var(--white);
    --color-status-bg: linear-gradient(180deg, rgba(238, 242, 255, 0.97), rgba(224, 231, 255, 0.94));
    --color-status-text: var(--indigo-800);

    --color-icon-bg: #eef2ff;
    --color-icon: var(--indigo-600);
    --color-board-header: var(--indigo-800);
    --color-board-header-complete: var(--emerald-700);
    --color-floating-bg: var(--indigo-800);
    --color-glow-a: rgba(79, 70, 229, 0.08);
    --color-glow-b: rgba(16, 185, 129, 0.07);

    --shadow-button: 0 8px 18px rgba(79, 70, 229, 0.14);
    --shadow-floating: 0 14px 30px rgba(17, 24, 39, 0.16);
}

/* --------------------------------------------------------------------------
   2b. 季節テーマ（セマンティック層の差し替えのみ / 現行 4 テーマの実効値を再現）
   -------------------------------------------------------------------------- */
:root[data-theme='spring'] {
    --color-bg: #fbf4f8;
    --color-primary: var(--pink-700);
    --color-primary-hover: var(--pink-800);
    --focus-ring-color: var(--pink-700);
    --color-badge-bg: #fff1f6;
    --color-badge-text: var(--pink-600);
    --color-header-start: #be185d;
    --color-header-end: #db2777;
    --color-header-bg: linear-gradient(135deg, #831843 0%, #be185d 55%, #db2777 100%);
    --color-header-border: rgba(131, 24, 67, 0.45);
    --color-header-text: var(--white);
    --color-status-bg: linear-gradient(180deg, rgba(253, 242, 248, 0.97), rgba(251, 207, 232, 0.94));
    --color-status-text: var(--pink-800);
    --color-icon-bg: #fff1f6;
    --color-icon: var(--pink-600);
    --color-board-header: var(--pink-800);
    --color-floating-bg: var(--pink-800);
    --color-glow-a: rgba(192, 38, 111, 0.08);
    --color-glow-b: rgba(16, 185, 129, 0.06);
    --shadow-button: 0 8px 18px rgba(192, 38, 111, 0.15);
}

:root[data-theme='summer'] {
    --color-bg: #f0fbff;
    --color-surface: var(--white);
    --color-surface-alt: #e1f6ff;
    --color-text: #083344;
    --color-text-muted: #0f5a6f;
    --color-primary: var(--cyan-700);
    --color-primary-hover: var(--cyan-800);
    --color-primary-contrast: var(--white);
    --color-border: rgba(14, 165, 233, 0.32);
    --color-surface-border: rgba(14, 165, 233, 0.28);
    --color-accent: #99f6e4;
    --focus-ring-color: var(--cyan-700);
    --color-badge-bg: #ecfeff;
    --color-badge-text: var(--cyan-700);
    --color-header-start: #0e7490;
    --color-header-end: #0369a1;
    --color-header-bg: linear-gradient(135deg, #164e63 0%, #0e7490 52%, #0369a1 100%);
    --color-header-border: rgba(22, 78, 99, 0.45);
    --color-header-text: var(--white);
    --color-status-bg: linear-gradient(180deg, rgba(236, 254, 255, 0.97), rgba(207, 250, 254, 0.94));
    --color-status-text: var(--cyan-800);
    --color-icon-bg: #ecfeff;
    --color-icon: var(--cyan-700);
    --color-board-header: var(--cyan-800);
    --color-floating-bg: var(--cyan-800);
    --color-glow-a: rgba(14, 116, 144, 0.08);
    --color-glow-b: rgba(16, 185, 129, 0.08);
    --shadow-button: 0 8px 18px rgba(14, 116, 144, 0.15);
    --shadow-floating: 0 16px 32px rgba(14, 165, 233, 0.30);
}

:root[data-theme='autumn'] {
    --color-bg: #fff7ef;
    --color-surface: var(--white);
    --color-surface-alt: #ffe8d2;
    --color-text: #442a11;
    --color-text-muted: #7c4a1d;
    --color-primary: var(--amber-700);
    --color-primary-hover: var(--amber-800);
    --color-primary-contrast: #fffbea;
    --color-border: rgba(217, 119, 6, 0.32);
    --color-surface-border: rgba(217, 119, 6, 0.28);
    --color-accent: #fcd19c;
    --focus-ring-color: var(--amber-700);
    --color-badge-bg: #fff7ed;
    --color-badge-text: var(--amber-700);
    --color-header-start: #92400e;
    --color-header-end: #b45309;
    --color-header-bg: linear-gradient(135deg, #78350f 0%, #92400e 50%, #b45309 100%);
    --color-header-border: rgba(120, 53, 15, 0.45);
    --color-header-text: #fffbea;
    --color-status-bg: linear-gradient(180deg, rgba(255, 247, 237, 0.97), rgba(254, 215, 170, 0.92));
    --color-status-text: var(--amber-800);
    --color-icon-bg: #fff7ed;
    --color-icon: var(--amber-700);
    --color-board-header: var(--amber-800);
    --color-floating-bg: var(--amber-800);
    --color-glow-a: rgba(180, 83, 9, 0.08);
    --color-glow-b: rgba(245, 158, 11, 0.06);
    --shadow-button: 0 8px 18px rgba(180, 83, 9, 0.15);
    --shadow-floating: 0 16px 32px rgba(234, 88, 12, 0.32);
}

:root[data-theme='winter'] {
    --color-bg: #f4f7ff;
    --color-surface: var(--white);
    --color-surface-alt: #e3e8ff;
    --color-text: #1a2249;
    --color-text-muted: #4c5a80;
    --color-primary: var(--indigo-600);
    --color-primary-hover: var(--indigo-800);
    --color-primary-contrast: var(--slate-50);
    --color-border: rgba(76, 110, 245, 0.26);
    --color-surface-border: rgba(76, 110, 245, 0.24);
    --color-accent: #a5b4fc;
    --focus-ring-color: var(--indigo-600);
    --color-badge-bg: #eef2ff;
    --color-badge-text: var(--indigo-700);
    --color-header-start: #4338ca;
    --color-header-end: #6d28d9;
    --color-header-bg: linear-gradient(135deg, #1e1b4b 0%, #4338ca 55%, #6d28d9 100%);
    --color-header-border: rgba(30, 27, 75, 0.5);
    --color-header-text: var(--slate-50);
    --color-status-bg: linear-gradient(180deg, rgba(238, 242, 255, 0.97), rgba(224, 231, 255, 0.94));
    --color-status-text: var(--indigo-800);
    --color-icon-bg: #eef2ff;
    --color-icon: var(--indigo-600);
    --color-board-header: var(--indigo-800);
    --color-floating-bg: var(--indigo-800);
    --color-glow-a: rgba(79, 70, 229, 0.08);
    --color-glow-b: rgba(14, 165, 233, 0.06);
    --shadow-button: 0 8px 18px rgba(79, 70, 229, 0.15);
    --shadow-floating: 0 16px 32px rgba(79, 70, 229, 0.32);
}

:root[data-theme='wakaba'] {
    --color-bg: #f2faf4;
    --color-surface-alt: #e3f6ea;
    --color-primary: #047857;
    --color-primary-hover: #065f46;
    --focus-ring-color: #047857;
    --color-badge-bg: #ecfdf5;
    --color-badge-text: #047857;
    --color-header-start: #065f46;
    --color-header-end: #047857;
    --color-header-bg: linear-gradient(135deg, #022c22 0%, #065f46 52%, #047857 100%);
    --color-header-border: rgba(6, 78, 59, 0.45);
    --color-header-text: var(--white);
    --color-status-bg: linear-gradient(180deg, rgba(236, 253, 245, 0.97), rgba(209, 250, 229, 0.92));
    --color-status-text: #065f46;
    --color-icon-bg: #ecfdf5;
    --color-icon: #047857;
    --color-board-header: #065f46;
    --color-floating-bg: #065f46;
    --color-glow-a: rgba(4, 120, 87, 0.08);
    --color-glow-b: rgba(245, 158, 11, 0.06);
    --shadow-button: 0 8px 18px rgba(4, 120, 87, 0.16);
}

/* 夜勤（ダーク）テーマ。トークン差し替えに加えて、白前提の部品は
   app_refinement.css 末尾の [data-theme='night'] 分岐で暗色化する。 */
:root[data-theme='night'] {
    --color-bg: #11141d;
    --color-surface: #1b2030;
    --color-surface-alt: #232a3d;
    --color-surface-soft: #1e2434;
    --color-text: #e6e9f4;
    --color-text-strong: #f8fafc;
    --color-text-muted: #9aa3bd;
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-primary-contrast: var(--white);
    --color-border: rgba(129, 140, 248, 0.24);
    --color-surface-border: rgba(129, 140, 248, 0.18);
    --focus-ring-color: #a5b4fc;
    --color-badge-bg: #272e4a;
    --color-badge-text: #c7d2fe;
    --color-header-start: #1e1b4b;
    --color-header-end: #312e81;
    --color-header-bg: linear-gradient(135deg, #0b0e1a 0%, #1e1b4b 55%, #312e81 100%);
    --color-header-border: rgba(129, 140, 248, 0.28);
    --color-header-text: #eef2ff;
    --color-status-bg: linear-gradient(180deg, rgba(23, 28, 44, 0.97), rgba(15, 19, 31, 0.94));
    --color-status-text: #c7d2fe;
    --color-icon-bg: #272e4a;
    --color-icon: #a5b4fc;
    --color-board-header: #3730a3;
    --color-board-header-complete: #065f46;
    --color-floating-bg: #4338ca;
    --color-glow-a: rgba(99, 102, 241, 0.10);
    --color-glow-b: rgba(14, 165, 233, 0.06);
    --shadow-button: 0 8px 18px rgba(0, 0, 0, 0.45);
    --shadow-floating: 0 16px 32px rgba(0, 0, 0, 0.55);
}

/* --------------------------------------------------------------------------
   3. 互換エイリアス（レガシー変数名 → セマンティックトークン）
   既存テンプレート/CSS の参照を壊さないための層。テーマ切替時も
   セマンティック層の差し替えが自動的に反映される。
   新規コードではセマンティックトークンを直接参照すること。
   -------------------------------------------------------------------------- */
:root {
    --bg: var(--color-bg);
    --surface: var(--color-surface);
    --surface-alt: var(--color-surface-alt);
    --surface-soft: var(--color-surface-soft);
    --text: var(--color-text);
    --text-strong: var(--color-text-strong);
    --muted: var(--color-text-muted);
    --text-muted: var(--color-text-muted);
    --primary: var(--color-primary);
    --primary-contrast: var(--color-primary-contrast);
    --header-start: var(--color-header-start);
    --header-end: var(--color-header-end);
    --header-bg: var(--color-header-bg);
    --header-border: var(--color-header-border);
    --header-text: var(--color-header-text);
    --status-bg: var(--color-status-bg);
    --status-text: var(--color-status-text);
    --border: var(--color-border);
    --surface-border: var(--color-surface-border);
    --accent: var(--color-accent);
    --focus: var(--focus-ring-color);
    --badge-bg: var(--color-badge-bg);
    --badge-text: var(--color-badge-text);
    --button-fill: var(--color-primary);
    --button-fill-hover: var(--color-primary-hover);
    --button-shadow: var(--shadow-button);
    --floating-bg: var(--color-floating-bg);
    --floating-shadow: var(--shadow-floating);
    --page-glow-a: var(--color-glow-a);
    --page-glow-b: var(--color-glow-b);
    --icon-bg: var(--color-icon-bg);
    --icon-color: var(--color-icon);
    --board-header-bg: var(--color-board-header);
    --board-header-bg-complete: var(--color-board-header-complete);
    --danger: var(--color-danger);
    --warning: var(--color-warning);
    --success: var(--color-success);
    --info: var(--color-info);
    --shadow-sm: var(--shadow-1);
    --shadow-md: var(--shadow-2);
    --shadow-lg: var(--shadow-3);
}