/* app/styles/tokens.css
   Design tokens of the HEADFACE admin console. Every colour used by a component comes from here,
   so the light and dark themes are switched by changing these variables only.
   Theme: follows the system (prefers-color-scheme) unless <html data-theme="light|dark"> is set. */

:root {
  color-scheme: light dark;

  --font-sans: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", "Sarabun", Tahoma, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.9375rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --lh: 1.6;

  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;

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

  --sidebar-w: 240px;
  --rail-w: 68px;
  --topbar-h: 56px;
  --bottomnav-h: 60px;
  --control-h: 40px;
  --touch: 44px;

  --dur: 150ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Brand */
  --brand: #00f0b5;
  --brand-hover: #00d9a3;
  --brand-ink: #04342c;
  --orange: #ff7a00;
  --purple: #7f56d9;

  /* Light palette */
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f2f4f7;
  --border: #e4e7ec;
  --border-strong: #d0d5dd;
  --text: #101828;
  --text-2: #475467;
  --text-3: #667085;
  --accent: #007a5a;
  --accent-soft: #e0fbf3;
  --focus: #008f6b;
  --overlay: rgba(16, 24, 40, 0.5);
  --shadow-pop: 0 8px 24px rgba(16, 24, 40, 0.14), 0 2px 6px rgba(16, 24, 40, 0.08);

  --info: #175cd3;
  --info-soft: #eff8ff;
  --success: #067647;
  --success-soft: #ecfdf3;
  --warning: #b54708;
  --warning-soft: #fffaeb;
  --danger: #d92d20;
  --danger-soft: #fef3f2;
  --danger-ink: #b42318;
  --pro: #6941c6;
  --pro-soft: #f4f3ff;
  --neutral-soft: #f2f4f7;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1220;
    --surface: #121a2b;
    --surface-2: #0f1626;
    --surface-3: #1a2438;
    --border: rgba(255, 255, 255, 0.09);
    --border-strong: rgba(255, 255, 255, 0.18);
    --text: #e6eaf2;
    --text-2: #b4bdce;
    --text-3: #94a3b8;
    --accent: #2ee6b8;
    --accent-soft: rgba(0, 240, 181, 0.12);
    --focus: #00f0b5;
    --overlay: rgba(2, 6, 14, 0.7);
    --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);

    --info: #84caff;
    --info-soft: rgba(46, 144, 250, 0.16);
    --success: #6ce9a6;
    --success-soft: rgba(18, 183, 106, 0.16);
    --warning: #fec84b;
    --warning-soft: rgba(247, 144, 9, 0.16);
    --danger: #f97066;
    --danger-soft: rgba(240, 68, 56, 0.16);
    --danger-ink: #fda29b;
    --pro: #b692f6;
    --pro-soft: rgba(127, 86, 217, 0.2);
    --neutral-soft: rgba(255, 255, 255, 0.07);
  }
}

:root[data-theme="dark"] {
  --bg: #0b1220;
  --surface: #121a2b;
  --surface-2: #0f1626;
  --surface-3: #1a2438;
  --border: rgba(255, 255, 255, 0.09);
  --border-strong: rgba(255, 255, 255, 0.18);
  --text: #e6eaf2;
  --text-2: #b4bdce;
  --text-3: #94a3b8;
  --accent: #2ee6b8;
  --accent-soft: rgba(0, 240, 181, 0.12);
  --focus: #00f0b5;
  --overlay: rgba(2, 6, 14, 0.7);
  --shadow-pop: 0 8px 24px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4);

  --info: #84caff;
  --info-soft: rgba(46, 144, 250, 0.16);
  --success: #6ce9a6;
  --success-soft: rgba(18, 183, 106, 0.16);
  --warning: #fec84b;
  --warning-soft: rgba(247, 144, 9, 0.16);
  --danger: #f97066;
  --danger-soft: rgba(240, 68, 56, 0.16);
  --danger-ink: #fda29b;
  --pro: #b692f6;
  --pro-soft: rgba(127, 86, 217, 0.2);
  --neutral-soft: rgba(255, 255, 255, 0.07);
}

:root[data-theme="light"] {
  color-scheme: light;
}
:root[data-theme="dark"] {
  color-scheme: dark;
}