:root {
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --bg: #f2f6fa;
  --bg-soft: #e9f0f7;
  --surface: #ffffff;
  --surface-2: #f8fafc;
  --surface-3: #eef3f8;
  --text: #0f172a;
  --text-muted: #5b6b82;
  --text-soft: #7c8aa0;
  --border: #dbe3ee;
  --border-strong: #c4d0e0;

  --primary: #0f766e;
  --primary-strong: #115e59;
  --primary-soft: #ccfbf1;
  --primary-contrast: #ffffff;
  --accent: #f59e0b;
  --accent-soft: #fef3c7;

  --danger: #dc2626;
  --danger-soft: #fee2e2;
  --danger-border: #fecaca;
  --success: #15803d;
  --success-soft: #dcfce7;
  --success-border: #bbf7d0;
  --warning: #b45309;
  --warning-soft: #fef3c7;
  --warning-border: #fde68a;
  --info: #1d4ed8;
  --info-soft: #dbeafe;
  --info-border: #bfdbfe;

  --ring: rgba(15, 118, 110, 0.28);
  --backdrop: rgba(7, 13, 24, 0.62);
  --header-bg: rgba(255, 255, 255, 0.86);

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 12px 30px -12px rgba(15, 23, 42, 0.28);
  --shadow-lg: 0 30px 70px -30px rgba(7, 13, 24, 0.5);
  --shadow-login: 0 40px 90px -35px rgba(7, 13, 24, 0.65);

  --radius-xs: 8px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  --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;

  --container: 1180px;
  --header-height: 72px;

  --login-brand-bg:
    radial-gradient(circle at 18% 10%, rgba(45, 212, 191, 0.22), transparent 40%),
    radial-gradient(circle at 88% 82%, rgba(245, 158, 11, 0.18), transparent 38%),
    linear-gradient(150deg, #072b2f 0%, #0b3f43 42%, #0b1526 100%);
  --login-brand-text: #f0fdfa;
  --login-brand-muted: rgba(226, 245, 242, 0.74);

  --skeleton: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
  --transition-fast: 140ms ease;
  --transition: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

[data-theme="dark"] {
  --bg: #070d18;
  --bg-soft: #0a1322;
  --surface: #0f1a2b;
  --surface-2: #132238;
  --surface-3: #1a2c46;
  --text: #e6eef8;
  --text-muted: #9fb0c7;
  --text-soft: #7e90aa;
  --border: #22344f;
  --border-strong: #2f4667;

  --primary: #2dd4bf;
  --primary-strong: #5eead4;
  --primary-soft: #0f3d3a;
  --primary-contrast: #042f2e;
  --accent: #fbbf24;
  --accent-soft: #422d08;

  --danger: #f87171;
  --danger-soft: #3b1216;
  --danger-border: #57222a;
  --success: #4ade80;
  --success-soft: #0d2f1c;
  --success-border: #1b4a2d;
  --warning: #fbbf24;
  --warning-soft: #3a2a08;
  --warning-border: #5b430f;
  --info: #93c5fd;
  --info-soft: #12233f;
  --info-border: #1e3a63;

  --ring: rgba(45, 212, 191, 0.3);
  --backdrop: rgba(0, 0, 0, 0.7);
  --header-bg: rgba(9, 17, 30, 0.84);

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 16px 36px -16px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 34px 80px -34px rgba(0, 0, 0, 0.8);
  --shadow-login: 0 40px 100px -30px rgba(0, 0, 0, 0.85);

  --login-brand-bg:
    radial-gradient(circle at 20% 6%, rgba(45, 212, 191, 0.18), transparent 42%),
    radial-gradient(circle at 90% 88%, rgba(251, 191, 36, 0.12), transparent 40%),
    linear-gradient(150deg, #041f22 0%, #082c31 45%, #060d18 100%);
  --login-brand-text: #ecfeff;
  --login-brand-muted: rgba(207, 250, 254, 0.7);
  --skeleton: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
}

[data-theme="gray"] {
  --bg: #e4e7eb;
  --bg-soft: #dadfe5;
  --surface: #f3f4f6;
  --surface-2: #eceff2;
  --surface-3: #dfe4ea;
  --text: #1f2937;
  --text-muted: #4b5563;
  --text-soft: #6b7280;
  --border: #cbd2da;
  --border-strong: #b4bdc8;

  --primary: #475569;
  --primary-strong: #334155;
  --primary-soft: #d7dde5;
  --primary-contrast: #ffffff;
  --accent: #b45309;
  --accent-soft: #f1e3cd;

  --danger: #b91c1c;
  --danger-soft: #f1d4d4;
  --danger-border: #e1b5b5;
  --success: #166534;
  --success-soft: #d6e8d9;
  --success-border: #b3d3b9;
  --warning: #92400e;
  --warning-soft: #eee0c7;
  --warning-border: #ddc9a4;
  --info: #1e40af;
  --info-soft: #d6deef;
  --info-border: #b4c2df;

  --ring: rgba(71, 85, 105, 0.3);
  --backdrop: rgba(17, 24, 39, 0.55);
  --header-bg: rgba(243, 244, 246, 0.88);

  --shadow-sm: 0 1px 3px rgba(31, 41, 55, 0.12);
  --shadow-md: 0 14px 32px -16px rgba(31, 41, 55, 0.35);
  --shadow-lg: 0 30px 70px -30px rgba(31, 41, 55, 0.45);
  --shadow-login: 0 40px 90px -30px rgba(31, 41, 55, 0.5);

  --login-brand-bg:
    radial-gradient(circle at 18% 8%, rgba(148, 163, 184, 0.25), transparent 42%),
    radial-gradient(circle at 88% 88%, rgba(180, 83, 9, 0.18), transparent 40%),
    linear-gradient(150deg, #29323f 0%, #3a4553 46%, #202733 100%);
  --login-brand-text: #f8fafc;
  --login-brand-muted: rgba(226, 232, 240, 0.76);
  --skeleton: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%);
}