/*
 * Design tokens — สกัดจาก _reference/orgcare360_design_system_preview_v4_motion_progress_standalone.html
 * (บรรทัด 9-86 สำหรับสี/spacing/radius/shadow, บรรทัด 906-922 สำหรับ chart color token)
 * ต้องโหลดไฟล์นี้ก่อน CSS อื่นทุกไฟล์เสมอ — ทุก component อ้างอิงตัวแปรจากที่นี่
 * ห้าม hardcode สีหรือระยะห่างเป็นค่าตรงๆ ในไฟล์อื่น ให้อ้างชื่อตัวแปรเสมอ
 */

:root {
  --font-sans: "Prompt", sans-serif;
  --brand-950: #071426;
  --brand-900: #0b1f36;
  --brand-800: #123555;
  --primary: #0f6b3f;
  --primary-hover: #0b5531;
  --primary-soft: #e7f5ec;
  --accent: #0f766e;
  --accent-gold: #ffb000;
  --accent-gold-soft: #fff6df;
  --success: #16803c;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --danger: #b42318;
  --danger-soft: #fef3f2;
  --info: #175cd3;
  --info-soft: #eff8ff;
  --canvas: #f4f6f9;
  --surface: #ffffff;
  --surface-subtle: #f8fafc;
  --surface-muted: #eef2f6;
  --surface-raised: #ffffff;
  --text: #101828;
  --text-soft: #344054;
  --muted: #667085;
  --border: #e4e7ec;
  --border-strong: #cfd4dc;
  --focus: #16a34a;
  --overlay: rgba(5, 12, 22, .62);
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-sm: 0 2px 8px rgba(16, 24, 40, .06);
  --shadow-md: 0 12px 28px rgba(16, 24, 40, .10);
  --shadow-lg: 0 24px 48px rgba(16, 24, 40, .16);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --space: 18px;
  --sidebar-width: 276px;
  /* Chart tokens (รวมมาจาก :root บล็อกที่สองของต้นฉบับ บรรทัด 906-914 — รวมไว้ที่นี่
     บล็อกเดียวเพื่อไม่ให้เกิด :root ซ้ำสองครั้งโดยไม่มีเหตุผล) */
  --chart-1: #155eef;
  --chart-2: #0f766e;
  --chart-3: #b54708;
  --chart-4: #7f56d9;
  --chart-5: #c11574;
  --chart-6: #475467;
  --chart-grid: color-mix(in srgb, var(--border) 82%, transparent);
  --chart-axis: var(--muted);
  /* ตัวคูณความเร็ว animation ของ progress/spinner (ใช้ใน progress.css) — ต้นฉบับประกาศค่านี้ไว้ใน
     .motion-system-section ของหน้า demo เอง (ไม่ได้สกัดมาเพราะเป็น demo gallery chrome) จึงย้ายมา
     ประกาศเป็น token กลางที่นี่แทน ตั้งค่า 1 = ความเร็วปกติ, override เป็นค่าอื่นได้ต่อ container */
  --motion-speed: 1;
  color-scheme: light;
}

html[data-theme="dark"] {
  --brand-950: #060d16;
  --brand-900: #0b1522;
  --brand-800: #14253a;
  --primary: #4ade80;
  --primary-hover: #7ce8a3;
  --primary-soft: #10301f;
  --accent: #55c9bd;
  --accent-gold: #ffd15c;
  --accent-gold-soft: #3a2c0d;
  --success: #55c878;
  --success-soft: #102b1c;
  --warning: #f3a94e;
  --warning-soft: #332411;
  --danger: #ff8b83;
  --danger-soft: #361817;
  --info: #84adff;
  --info-soft: #13284b;
  --canvas: #0f141b;
  --surface: #171d26;
  --surface-subtle: #1d2530;
  --surface-muted: #273140;
  --surface-raised: #202834;
  --text: #f2f4f7;
  --text-soft: #d0d5dd;
  --muted: #98a2b3;
  --border: #2e3948;
  --border-strong: #475467;
  --focus: #6ee7a1;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .22);
  --shadow-md: 0 16px 34px rgba(0, 0, 0, .28);
  --shadow-lg: 0 28px 58px rgba(0, 0, 0, .38);
  /* Chart tokens (dark) — รวมมาจาก :root บล็อกที่สองของต้นฉบับ บรรทัด 917-922 */
  --chart-1: #75a7ff;
  --chart-2: #55c9bd;
  --chart-3: #f3a94e;
  --chart-4: #b692f6;
  --chart-5: #f670c7;
  --chart-6: #98a2b3;
  color-scheme: dark;
}

html[data-density="compact"] {
  --space: 13px;
  --radius-md: 10px;
  --radius-lg: 13px;
}