/*
 * HairGrowth OS — Design tokens (single source of truth)
 * 三層結構：Primitive（原始值）→ Semantic（用途）→ Component（元件）
 * 元件 CSS 只可引用 Semantic／Component token，不寫死色碼。
 * 對比數據見 docs/UI_DESIGN_TOKENS.md（WCAG 2.x 計算，一般文字 ≥ 4.5:1）。
 * 初版僅淺色主題；深色模式列後期（UIUX_SPEC §1）。
 */
:root {
  /* ---------- Primitive: color ---------- */
  --p-gray-0: #FFFFFF;
  --p-gray-50: #F5F7FA;
  --p-gray-100: #EDF1F6;
  --p-gray-200: #E5E7EB;
  --p-gray-300: #CBD2DC;
  --p-gray-500: #6B7280;
  --p-gray-600: #4B5563;
  --p-gray-700: #374151;
  --p-gray-800: #1F2937;
  --p-gray-900: #111827;
  --p-slate-300: #CBD5E1;
  --p-slate-800: #1E293B;
  --p-slate-900: #0F172A;

  --p-blue-50: #E3F0FA;
  --p-blue-600: #0B63A8;
  --p-blue-700: #084E86;
  --p-blue-300: #93C5FD;
  --p-indigo-700: #1D4ED8;

  --p-green-100: #DCFCE7;
  --p-green-700: #15803D;
  --p-green-800: #166534;
  --p-amber-100: #FEF3C7;
  --p-amber-800: #854D0E;
  --p-red-100: #FEE2E2;
  --p-red-700: #B91C1C;
  --p-red-800: #991B1B;
  --p-sky-100: #DBEAFE;
  --p-sky-800: #1E40AF;
  --p-orange-100: #FFEDD5;
  --p-orange-800: #9A3412;
  --p-violet-100: #EDE9FE;
  --p-violet-800: #5B21B6;

  /* ---------- Semantic: surfaces & text ---------- */
  --color-bg: var(--p-gray-50);
  --color-surface: var(--p-gray-0);
  --color-surface-2: var(--p-gray-100);
  --color-text: var(--p-gray-900);
  --color-text-muted: var(--p-gray-600);
  --color-text-inverse: var(--p-gray-0);
  --color-border: var(--p-gray-300);
  --color-border-strong: var(--p-gray-500); /* 輸入框邊框，非文字對比 ≥ 3:1 */

  --color-primary: var(--p-blue-600);
  --color-primary-hover: var(--p-blue-700);
  --color-primary-soft: var(--p-blue-50);
  --color-primary-soft-text: var(--p-blue-700);
  --color-on-primary: var(--p-gray-0);

  --color-nav-bg: var(--p-slate-900);
  --color-nav-text: var(--p-slate-300);
  --color-nav-active-bg: var(--p-slate-800);
  --color-nav-active-text: var(--p-gray-0);

  /* ---------- Semantic: status（背景＋文字成對使用，並一律搭配圖示或文字）---------- */
  --color-success-bg: var(--p-green-100);
  --color-success-text: var(--p-green-800);
  --color-success: var(--p-green-700);
  --color-warning-bg: var(--p-amber-100);
  --color-warning-text: var(--p-amber-800);
  --color-danger-bg: var(--p-red-100);
  --color-danger-text: var(--p-red-800);
  --color-danger: var(--p-red-700);
  --color-info-bg: var(--p-sky-100);
  --color-info-text: var(--p-sky-800);
  --color-neutral-bg: var(--p-gray-200);
  --color-neutral-text: var(--p-gray-700);
  --color-pending-bg: var(--p-orange-100);
  --color-pending-text: var(--p-orange-800);
  --color-demo-bg: var(--p-violet-100);
  --color-demo-text: var(--p-violet-800);

  --color-toast-bg: var(--p-gray-800);
  --color-toast-text: #F9FAFB;
  --color-scrim: rgb(17 24 39 / 0.55);

  /* ---------- Semantic: focus ---------- */
  --focus-color: var(--p-indigo-700);
  --focus-color-on-dark: var(--p-blue-300);
  --focus-width: 3px;
  --focus-offset: 2px;

  /* ---------- Typography（系統字型，不依賴外部字型 CDN）---------- */
  --font-sans: system-ui, -apple-system, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-size-xs: 0.8125rem;  /* 13px：僅輔助標記，不用於正文 */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-md: 1rem;       /* 16px：正文預設 */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.375rem;   /* 22px */
  --font-size-2xl: 1.75rem;   /* 28px */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-tight: 1.3;
  --line-height-normal: 1.6;

  /* ---------- Spacing（4px 基準）---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* ---------- Radius / Shadow ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgb(17 24 39 / 0.08);
  --shadow-md: 0 4px 12px rgb(17 24 39 / 0.12);
  --shadow-lg: 0 12px 32px rgb(17 24 39 / 0.2);

  /* ---------- Z-index ---------- */
  --z-base: 0;
  --z-sticky: 100;
  --z-nav: 200;
  --z-drawer: 400;
  --z-dialog: 500;
  --z-toast: 600;

  /* ---------- Motion（prefers-reduced-motion 時歸零，見 base.css）---------- */
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --easing-standard: cubic-bezier(0.2, 0, 0, 1);

  /* ---------- Layout ---------- */
  --touch-target: 44px;
  --topbar-height: 56px;
  --bottom-nav-height: 64px;
  --sidebar-width: 248px;
  --content-max: 72rem;
  --reading-max: 44rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Component tokens ---------- */
  --button-height: var(--touch-target);
  --button-radius: var(--radius-md);
  --input-height: 48px;
  --input-radius: var(--radius-md);
  --input-border: var(--color-border-strong);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-4);
  --badge-radius: var(--radius-pill);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-normal: 0ms;
  }
}