:root {
  --brand-navy: #182b70;
  --brand-teal: #008080;
  --brand-cyan: #74cecc;

  --surface-light: #ffffff;
  --surface-main: #f7f8fb;
  --surface-muted: #f5f5f5;

  --surface-dark: #0a0f2b;
  --surface-dark-2: #121735;
  --ink-dark: #1a2035;
  --ink-blue: #1a2b5b;
  --ink-indigo: #1a237e;

  --highlight-blue: #246bff;
  --highlight-blue-strong: #0439df;

  --text-primary: #1f2937;
  --text-secondary: #666;
  --text-muted: #999;

  --border-soft: #e5e7eb;
  --border-medium: #d1d5db;

  --success: #10b981;
  --success-dark: #0f766e;
  --danger: #ff6b6b;
  --danger-dark: #b91c1c;
  --warning: #f59e0b;

  --gradient-main: linear-gradient(90deg, #008080 0%, #182b70 100%);
  --gradient-alt: linear-gradient(120deg, #0b7a75 0%, #182b70 100%);

  --radius-section: 30px;
  --radius-card: 24px;
  --radius-control: 50px;
  --radius-soft: 20px;

  --shadow-section: 0 10px 40px rgba(0, 0, 0, 0.1);
  --shadow-card: 0 10px 30px rgba(24, 43, 112, 0.08);
  --shadow-glow: 0 25px 50px rgba(116, 206, 204, 0.2);

  --transition-fast: 0.3s ease;
  --transition-premium: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="dark"] {
  --surface-light: #0f152f;
  --surface-main: #0a0f2b;
  --surface-muted: #121735;

  --text-primary: #e5edf9;
  --text-secondary: #9fb0c8;
  --text-muted: #7d8ba2;

  --border-soft: rgba(116, 206, 204, 0.2);
  --border-medium: rgba(116, 206, 204, 0.3);

  --shadow-section: 0 16px 42px rgba(0, 8, 26, 0.5);
  --shadow-card: 0 10px 30px rgba(0, 8, 26, 0.42);
  --shadow-glow: 0 26px 50px rgba(116, 206, 204, 0.16);
}