/* HI809 Store Theme System
   Source of truth for light and dark visual tokens. */

:root {
    color-scheme: light;

    --bg-main: #f6f8fb;
    --bg-card: #ffffff;
    --bg-secondary: #f1f5f9;
    --bg-elevated: #ffffff;
    --bg-hover: #eef4ff;
    --text-main: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --border-color: #dbe4f0;
    --border-soft: #e5eaf2;
    --primary-color: #01a982;
    --primary-hover: #007f63;
    --primary-soft: #e6fff8;
    --success-color: #16a34a;
    --danger-color: #dc2626;
    --warning-color: #d97706;
    --info-color: #2563eb;
    --shadow-color: rgba(15, 23, 42, .12);
    --shadow-soft: 0 12px 28px rgba(15, 23, 42, .08);
    --shadow-strong: 0 24px 60px rgba(15, 23, 42, .18);
    --input-bg: #ffffff;
    --input-text: #0f172a;
    --input-border: #cbd5e1;
    --input-placeholder: #94a3b8;
    --modal-bg: #ffffff;
    --navbar-bg: #050b18;
    --navbar-text: #e5e7eb;
    --sidebar-bg: #ffffff;
    --card-bg: #ffffff;
    --table-bg: #ffffff;
    --table-head-bg: #f8fafc;
    --table-hover: #f1f5f9;
    --scrollbar-bg: #e2e8f0;
    --scrollbar-thumb: #94a3b8;
    --focus-ring: rgba(1, 169, 130, .25);
    --glass-bg: rgba(255, 255, 255, .78);
    --glass-border: rgba(148, 163, 184, .28);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 18px;

    --hi-red: var(--primary-color);
    --hi-red-hover: var(--primary-hover);
    --hi-green: var(--primary-color);
    --hi-dark: var(--navbar-bg);
    --hi-dark-2: #111827;
    --hi-dark-3: #1e293b;
    --hi-gray-1: var(--bg-main);
    --hi-gray-2: var(--border-soft);
    --hi-gray-3: #cbd5e1;
    --hi-gray-4: var(--text-secondary);
    --hi-white: var(--text-inverse);
    --hi-text: var(--text-main);
    --hi-text-2: var(--text-secondary);
    --hi-border: var(--border-color);
    --hi-shadow: 0 1px 4px var(--shadow-color);
    --hi-shadow-md: var(--shadow-soft);
}

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

    --bg-main: #0b1120;
    --bg-card: #121a2a;
    --bg-secondary: #0f172a;
    --bg-elevated: #172033;
    --bg-hover: #1e293b;
    --text-main: #f8fafc;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;
    --border-color: rgba(148, 163, 184, .16);
    --border-soft: rgba(148, 163, 184, .10);
    --primary-color: #14b8a6;
    --primary-hover: #0d9488;
    --primary-soft: rgba(20, 184, 166, .16);
    --success-color: #22c55e;
    --danger-color: #f87171;
    --warning-color: #f59e0b;
    --info-color: #60a5fa;
    --shadow-color: rgba(0, 0, 0, .42);
    --shadow-soft: 0 14px 32px rgba(0, 0, 0, .22);
    --shadow-strong: 0 28px 70px rgba(0, 0, 0, .38);
    --input-bg: #020617;
    --input-text: #f8fafc;
    --input-border: rgba(148, 163, 184, .24);
    --input-placeholder: #94a3b8;
    --modal-bg: #111827;
    --navbar-bg: #050b18;
    --navbar-text: #f8fafc;
    --sidebar-bg: #0f172a;
    --card-bg: #121a2a;
    --table-bg: #121a2a;
    --table-head-bg: #172033;
    --table-hover: rgba(148, 163, 184, .08);
    --scrollbar-bg: #0f172a;
    --scrollbar-thumb: #475569;
    --focus-ring: rgba(20, 184, 166, .28);
    --glass-bg: rgba(17, 24, 39, .78);
    --glass-border: rgba(148, 163, 184, .22);
}

html,
body {
    background: var(--bg-main);
    color: var(--text-main);
}

* {
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-bg);
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-bg);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border: 2px solid var(--scrollbar-bg);
    border-radius: 999px;
}