:root {
  --brand-50: #ecfeff;
  --brand-100: #cefafe;
  --brand-200: #a2f4fd;
  --brand-300: #53eafd;
  --brand-400: #00d3f3;
  --brand-500: #00b8db;
  --brand-600: #0092b8;
  --brand-700: #007595;
  --brand-800: #005f78;
  --brand-900: #104e64;
  --brand-950: #053345;

  --color-primary: var(--brand-500);
  --color-primary-hover: var(--brand-400);
  --color-primary-active: var(--brand-600);
  --color-primary-subtle: color-mix(in srgb, var(--brand-500) 12%, transparent);
  --color-primary-glow: color-mix(in srgb, var(--brand-400) 30%, transparent);
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: var(--brand-400);

  --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;
  --space-20: 80px;
  --space-24: 96px;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-2xl: 28px;
  --radius-full: 9999px;

  --font-display: "Sora", "DM Sans", sans-serif;
  --font-body: "DM Sans", "Inter", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;

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

  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  --z-base: 0;
  --z-raised: 10;
  --z-dropdown: 200;
  --z-sticky: 300;
  --z-overlay: 400;
  --z-modal: 500;
  --z-toast: 600;
  --z-top: 999;
}

:root,
html[data-theme="dark"],
html[data-skk-theme="dark"],
body[data-theme="dark"],
body[data-skk-theme="dark"] {
  color-scheme: dark;
  --surface-page: #080d12;
  --surface-base: #0d1520;
  --surface-raised: #111e2e;
  --surface-overlay: #162334;
  --surface-sunken: #060b10;
  --surface-inverse: #ecf4f9;

  --glass-bg: rgba(13, 21, 32, 0.65);
  --glass-bg-hover: rgba(17, 30, 46, 0.75);
  --glass-border: rgba(0, 184, 219, 0.12);
  --glass-border-hover: rgba(0, 184, 219, 0.28);
  --glass-blur: 16px;
  --glass-blur-light: 8px;
  --glass-glow: 0 0 24px rgba(0, 184, 219, 0.08);
  --glass-glow-strong: 0 0 40px rgba(0, 184, 219, 0.15);
  --glass-shine: linear-gradient(135deg, rgba(0, 211, 243, 0.06) 0%, transparent 60%);

  --text-primary: #e8f4f8;
  --text-secondary: #94b3c4;
  --text-muted: #5a7a8e;
  --text-disabled: #2e4a5a;
  --text-inverse: #080d12;
  --text-brand: var(--brand-400);
  --text-link: var(--brand-400);
  --text-link-hover: var(--brand-300);

  --border-subtle: rgba(0, 184, 219, 0.08);
  --border-default: rgba(0, 184, 219, 0.15);
  --border-strong: rgba(0, 184, 219, 0.3);
  --border-focus: var(--brand-400);

  --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 184, 219, 0.06);
  --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 184, 219, 0.08);
  --shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 184, 219, 0.1), 0 0 30px rgba(0, 184, 219, 0.05);
  --shadow-xl: 0 16px 64px rgba(0, 0, 0, 0.65), 0 0 60px rgba(0, 184, 219, 0.08);
  --shadow-glow: 0 0 20px rgba(0, 184, 219, 0.2), 0 0 40px rgba(0, 184, 219, 0.1);

  --input-bg: rgba(6, 11, 16, 0.7);
  --input-border: rgba(0, 184, 219, 0.18);
  --input-focus-bg: rgba(6, 11, 16, 0.85);
  --input-placeholder: #3d6070;

  --sidebar-bg: rgba(8, 13, 18, 0.92);
  --sidebar-border: rgba(0, 184, 219, 0.1);
  --sidebar-item-hover: rgba(0, 184, 219, 0.08);
  --sidebar-item-active: rgba(0, 184, 219, 0.14);

  --header-bg: rgba(8, 13, 18, 0.88);
  --header-border: rgba(0, 184, 219, 0.1);

  --scrollbar-track: rgba(13, 21, 32, 0.8);
  --scrollbar-thumb: rgba(0, 184, 219, 0.18);
  --scrollbar-thumb-hover: rgba(0, 184, 219, 0.32);
}

html[data-theme="light"],
html[data-skk-theme="light"],
body[data-theme="light"],
body[data-skk-theme="light"] {
  color-scheme: light;
  --surface-page: #f4f8fb;
  --surface-base: #ffffff;
  --surface-raised: #f0f6fa;
  --surface-overlay: #e8f2f8;
  --surface-sunken: #eaf2f7;
  --surface-inverse: #0d1520;

  --glass-bg: rgba(255, 255, 255, 0.88);
  --glass-bg-hover: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(0, 117, 149, 0.30);
  --glass-border-hover: rgba(0, 146, 184, 0.32);
  --glass-blur: 16px;
  --glass-blur-light: 8px;
  --glass-glow: 0 0 24px rgba(0, 146, 184, 0.06);
  --glass-glow-strong: 0 0 40px rgba(0, 146, 184, 0.12);
  --glass-shine: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.2) 60%);

  --text-primary: #0d1f2d;
  --text-secondary: #2e5068;
  --text-muted: #4d7088;
  --text-disabled: #7ba0b4;
  --text-inverse: #f4f8fb;
  --text-brand: var(--brand-700);
  --text-link: var(--brand-700);
  --text-link-hover: var(--brand-600);

  --border-subtle: rgba(0, 117, 149, 0.20);
  --border-default: rgba(0, 117, 149, 0.32);
  --border-strong: rgba(0, 117, 149, 0.50);
  --border-focus: var(--brand-600);

  --shadow-xs: 0 1px 3px rgba(13, 31, 45, 0.08);
  --shadow-sm: 0 2px 8px rgba(13, 31, 45, 0.1);
  --shadow-md: 0 4px 20px rgba(13, 31, 45, 0.12);
  --shadow-lg: 0 8px 40px rgba(13, 31, 45, 0.14), 0 0 0 1px rgba(0, 117, 149, 0.06);
  --shadow-xl: 0 16px 64px rgba(13, 31, 45, 0.18);
  --shadow-glow: 0 0 20px rgba(0, 146, 184, 0.15), 0 0 40px rgba(0, 146, 184, 0.08);

  --input-bg: rgba(255, 255, 255, 0.9);
  --input-border: rgba(0, 117, 149, 0.2);
  --input-focus-bg: #ffffff;
  --input-placeholder: #4d7088;

  --sidebar-bg: rgba(244, 248, 251, 0.95);
  --sidebar-border: rgba(0, 117, 149, 0.1);
  --sidebar-item-hover: rgba(0, 146, 184, 0.07);
  --sidebar-item-active: rgba(0, 146, 184, 0.12);

  --header-bg: rgba(255, 255, 255, 0.88);
  --header-border: rgba(0, 117, 149, 0.1);

  --scrollbar-track: rgba(244, 248, 251, 0.9);
  --scrollbar-thumb: rgba(0, 146, 184, 0.2);
  --scrollbar-thumb-hover: rgba(0, 146, 184, 0.38);

  --color-primary: var(--brand-600);
  --color-primary-hover: var(--brand-500);
  --color-primary-active: var(--brand-700);
  --color-primary-subtle: color-mix(in srgb, var(--brand-600) 18%, transparent);
}