:root {
  /* Light */
  --bg: #f7fafc;
  --header: #ffffff;

  --surface: #ffffff;
  --surface-2: #edf2f7;
  --surface-3: #e2e8f0;

  --text: #2d3748;
  --text-2: #718096;
  --text-muted: #a0aec0;

  --border: #e2e8f0;

  --primary: #2c5282;
  --primary-hover: #2b6cb0;
  --primary-pressed: #1a365d;
  --primary-gradient: linear-gradient(135deg, #2c5282 0%, #1a365d 100%);

  --shadow-1: 0 1px 3px rgba(0,0,0,0.10);
  --shadow-2: 0 2px 8px rgba(0,0,0,0.10);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.15);

  --focus-ring: rgba(44,82,130,0.35);

  /* Status */
  --success-bg: #c6f6d5;
  --success-text: #22543d;

  --info-bg: #bee3f8;
  --info-text: #2c5282;

  --warn-bg: #feebc8;
  --warn-text: #7c2d12;

  --error-bg: #fed7d7;
  --error-text: #c53030;

  /* Optional accents */
  --accent-cyan: #50a8d8;
  --accent-orange: #f89810;
}

:root[data-theme="dark"] {
  /* Dark */
  --bg: #1a202c;
  --header: #0f172a;

  --surface: #2d3748;
  --surface-2: #374151;
  --surface-3: #425066;

  --text: #f7fafc;
  --text-2: #cbd5e0;
  --text-muted: #a0aec0;

  --border: #4a5568;

  --primary: #4299e1;
  --primary-hover: #63b3ed;
  --primary-pressed: #2c5282;
  --primary-gradient: linear-gradient(135deg, #4299e1 0%, #2c5282 100%);

  --shadow-1: 0 1px 3px rgba(0,0,0,0.30);
  --shadow-2: 0 2px 10px rgba(0,0,0,0.45);
  --shadow-hover: 0 6px 18px rgba(0,0,0,0.55);

  --focus-ring: rgba(66,153,225,0.35);

  /* Status (dark: use translucent bg + light text) */
  --success-bg: rgba(72, 187, 120, 0.18);
  --success-text: #c6f6d5;

  --info-bg: rgba(99, 179, 237, 0.18);
  --info-text: #bee3f8;

  --warn-bg: rgba(246, 173, 85, 0.20);
  --warn-text: #feebc8;

  --error-bg: rgba(252, 129, 129, 0.18);
  --error-text: #fed7d7;
}