/* ============================================================
   Design Tokens — 教練預約系統
   一比一對照 2-設計規範.md §2 與既有 2-原型.html 的 CSS 變數命名，
   確保設計交接零歧義。新增／擴充處於各區塊註明「(擴充)」。
   ============================================================ */

:root {
  /* ---------- 2.1 Primitive 色階（不直接用於元件） ---------- */
  --p-blue-50:#EFF6FF; --p-blue-100:#DBEAFE; --p-blue-300:#93C5FD; --p-blue-400:#60A5FA;
  --p-blue-500:#3B82F6; --p-blue-600:#2563EB; --p-blue-700:#1D4ED8; --p-blue-800:#1E40AF; --p-blue-900:#1E3A8A;
  --p-slate-50:#F8FAFC; --p-slate-100:#F1F5F9; --p-slate-200:#E2E8F0; --p-slate-300:#CBD5E1;
  --p-slate-400:#94A3B8; --p-slate-500:#64748B; --p-slate-600:#475569; --p-slate-700:#334155;
  --p-slate-800:#1E293B; --p-slate-900:#0F172A; --p-ink-950:#0B1220;
  --p-green-50:#F0FDF4; --p-green-100:#DCFCE7; --p-green-400:#4ADE80; --p-green-600:#16A34A; --p-green-700:#15803D;
  --p-amber-50:#FFFBEB; --p-amber-100:#FEF3C7; --p-amber-300:#FCD34D; --p-amber-600:#D97706; --p-amber-800:#92400E;
  --p-red-50:#FEF2F2; --p-red-100:#FEE2E2; --p-red-400:#F87171; --p-red-600:#DC2626; --p-red-700:#B91C1C;
  --p-sky-50:#F0F9FF; --p-sky-100:#E0F2FE; --p-sky-300:#7DD3FC; --p-sky-600:#0284C7; --p-sky-700:#0369A1;
  --p-violet-100:#EDE9FE; --p-violet-300:#C4B5FD; --p-violet-600:#7C3AED; --p-violet-700:#6D28D9;

  /* ---------- 2.2 Semantic 色彩 — Light（預設） ---------- */
  --color-bg-canvas:#F8FAFC;
  --color-bg-surface:#FFFFFF;
  --color-bg-surface-raised:#FFFFFF;
  --color-bg-subtle:#F1F5F9;
  --color-bg-overlay:rgba(15,23,42,0.50);
  --color-text-primary:#0F172A;
  --color-text-secondary:#475569;
  --color-text-tertiary:#64748B;
  --color-text-disabled:#94A3B8;
  --color-text-inverse:#FFFFFF;
  --color-text-link:#1D4ED8;
  --color-border-subtle:#E2E8F0;
  --color-border-interactive:#64748B;
  --color-border-focus:#2563EB;
  --color-primary-default:#2563EB;
  --color-primary-hover:#1D4ED8;
  --color-primary-active:#1E40AF;
  --color-primary-subtle-bg:#DBEAFE;
  --color-primary-subtle-text:#1D4ED8;
  --state-success-bg:#F0FDF4; --state-success-text:#15803D; --state-success-border:#BBF7D0;
  --state-warning-bg:#FFFBEB; --state-warning-text:#92400E; --state-warning-border:#FDE68A;
  --state-error-bg:#FEF2F2; --state-error-text:#B91C1C; --state-error-border:#FECACA;
  --state-info-bg:#F0F9FF; --state-info-text:#0369A1; --state-info-border:#BAE6FD;
  --state-neutral-bg:#F1F5F9; --state-neutral-text:#475569;
  --coach-a-bg:#DBEAFE; --coach-a-text:#1D4ED8;
  --coach-b-bg:#EDE9FE; --coach-b-text:#6D28D9;
  --color-danger-default:#DC2626; /* danger.default，P1 取消操作預留 */

  --shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.10);
  --shadow-2: 0 4px 6px rgba(15,23,42,0.07), 0 10px 15px rgba(15,23,42,0.10);
  --shadow-focus-ring: 0 0 0 3px rgba(37,99,235,0.35);
  --border-card: none;

  /* ---------- 2.3 間距 ---------- */
  --space-0:0; --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px;
  --space-6:24px; --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px;

  /* ---------- 2.4 字級 ---------- */
  --font-family-base:"PingFang TC","Noto Sans TC","Microsoft JhengHei",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --font-size-xs:12px; --lh-xs:16px;
  --font-size-sm:14px; --lh-sm:20px;
  --font-size-base:16px; --lh-base:24px;
  --font-size-lg:18px; --lh-lg:28px;
  --font-size-xl:20px; --lh-xl:28px;
  --font-size-2xl:24px; --lh-2xl:32px;
  --font-size-3xl:30px; --lh-3xl:38px;

  --font-weight-regular:400;
  --font-weight-medium:500;
  --font-weight-semibold:600;
  --font-weight-bold:700;

  /* ---------- 2.5 圓角 ---------- */
  --radius-sm:4px; --radius-md:8px; --radius-lg:12px; --radius-xl:16px; --radius-full:9999px;

  /* ---------- 2.8 動效與層級 ---------- */
  --motion-fast:120ms; --motion-base:200ms; --motion-slow:320ms;
  --motion-easing:cubic-bezier(0.4,0,0.2,1);

  --z-dropdown:1000;
  --z-sticky:1100;
  --z-overlay:1200;
  --z-modal:1300;
  --z-toast:1400;
}

/* ---------- Dark — 手動切換（[data-theme="dark"]）優先於系統偏好 ---------- */
:root[data-theme="dark"] {
  --color-bg-canvas:#0B1220;
  --color-bg-surface:#1E293B;
  --color-bg-surface-raised:#24344A;
  --color-bg-subtle:#16233A;
  --color-bg-overlay:rgba(0,0,0,0.60);
  --color-text-primary:#F8FAFC;
  --color-text-secondary:#CBD5E1;
  --color-text-tertiary:#94A3B8;
  --color-text-disabled:#64748B;
  --color-text-inverse:#0F172A;
  --color-text-link:#60A5FA;
  --color-border-subtle:#334155;
  --color-border-interactive:#94A3B8;
  --color-border-focus:#60A5FA;
  --color-primary-default:#3B82F6;
  --color-primary-hover:#60A5FA;
  --color-primary-active:#93C5FD;
  --color-primary-subtle-bg:rgba(59,130,246,0.16);
  --color-primary-subtle-text:#93C5FD;
  --state-success-bg:rgba(74,222,128,0.12); --state-success-text:#4ADE80; --state-success-border:rgba(74,222,128,0.35);
  --state-warning-bg:rgba(252,211,77,0.14); --state-warning-text:#FCD34D; --state-warning-border:rgba(252,211,77,0.35);
  --state-error-bg:rgba(248,113,113,0.14); --state-error-text:#F87171; --state-error-border:rgba(248,113,113,0.35);
  --state-info-bg:rgba(125,211,252,0.14); --state-info-text:#7DD3FC; --state-info-border:rgba(125,211,252,0.35);
  --state-neutral-bg:#16233A; --state-neutral-text:#CBD5E1;
  --coach-a-bg:rgba(59,130,246,0.18); --coach-a-text:#93C5FD;
  --coach-b-bg:rgba(124,58,237,0.20); --coach-b-text:#C4B5FD;
  --color-danger-default:#F87171;

  --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
  --shadow-2: 0 10px 20px rgba(0,0,0,0.55);
  --shadow-focus-ring: 0 0 0 3px rgba(96,165,250,0.40);
  --border-card: 1px solid var(--color-border-subtle);
}

/* ---------- Dark — 系統偏好（未手動指定 light 時套用） ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --color-bg-canvas:#0B1220;
    --color-bg-surface:#1E293B;
    --color-bg-surface-raised:#24344A;
    --color-bg-subtle:#16233A;
    --color-bg-overlay:rgba(0,0,0,0.60);
    --color-text-primary:#F8FAFC;
    --color-text-secondary:#CBD5E1;
    --color-text-tertiary:#94A3B8;
    --color-text-disabled:#64748B;
    --color-text-inverse:#0F172A;
    --color-text-link:#60A5FA;
    --color-border-subtle:#334155;
    --color-border-interactive:#94A3B8;
    --color-border-focus:#60A5FA;
    --color-primary-default:#3B82F6;
    --color-primary-hover:#60A5FA;
    --color-primary-active:#93C5FD;
    --color-primary-subtle-bg:rgba(59,130,246,0.16);
    --color-primary-subtle-text:#93C5FD;
    --state-success-bg:rgba(74,222,128,0.12); --state-success-text:#4ADE80; --state-success-border:rgba(74,222,128,0.35);
    --state-warning-bg:rgba(252,211,77,0.14); --state-warning-text:#FCD34D; --state-warning-border:rgba(252,211,77,0.35);
    --state-error-bg:rgba(248,113,113,0.14); --state-error-text:#F87171; --state-error-border:rgba(248,113,113,0.35);
    --state-info-bg:rgba(125,211,252,0.14); --state-info-text:#7DD3FC; --state-info-border:rgba(125,211,252,0.35);
    --state-neutral-bg:#16233A; --state-neutral-text:#CBD5E1;
    --coach-a-bg:rgba(59,130,246,0.18); --coach-a-text:#93C5FD;
    --coach-b-bg:rgba(124,58,237,0.20); --coach-b-text:#C4B5FD;
    --color-danger-default:#F87171;
    --shadow-1: 0 1px 2px rgba(0,0,0,0.40);
    --shadow-2: 0 10px 20px rgba(0,0,0,0.55);
    --shadow-focus-ring: 0 0 0 3px rgba(96,165,250,0.40);
    --border-card: 1px solid var(--color-border-subtle);
  }
}

/* ---------- 2.7 中斷點（供閱讀對照，媒體查詢不可用 var()） ----------
  bp.xs = 0      bp.sm = 375px   bp.md = 768px
  bp.lg = 1024px bp.xl = 1280px
------------------------------------------------------------- */

/* ---------- CR1：場館照片佔位圖漸層 token ---------- */
:root { --color-bg-placeholder-start:#DBEAFE; --color-bg-placeholder-end:#EDE9FE; }
:root[data-theme="dark"] { --color-bg-placeholder-start:rgba(59,130,246,0.18); --color-bg-placeholder-end:rgba(124,58,237,0.16); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]):not([data-theme="dark"]){ --color-bg-placeholder-start:rgba(59,130,246,0.18); --color-bg-placeholder-end:rgba(124,58,237,0.16); } }