:root {
  /* Primary colors */
  --color-primary: #2563eb;
  --color-primary-dark: #1d4ed8;
  --color-primary-light: #3b82f6;
  --color-primary-alpha-15: rgba(37, 99, 235, 0.15);

  /* Navy/brand colors */
  --color-navy: #0f172a;
  --color-navy-light: #1e3a5f;
  --color-indigo: #1e40af;

  /* Text colors */
  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;
  --color-text-inverse-85: rgba(255, 255, 255, 0.85);
  --color-text-inverse-70: rgba(255, 255, 255, 0.7);
  --color-text-inverse-30: rgba(255, 255, 255, 0.3);
  --color-text-inverse-20: rgba(255, 255, 255, 0.2);
  --color-text-inverse-15: rgba(255, 255, 255, 0.15);
  --color-text-inverse-10: rgba(255, 255, 255, 0.1);

  /* Overlay backgrounds */
  --color-bg-overlay: rgba(255, 255, 255, 0.95);

  /* Background colors */
  --color-bg: #ffffff;
  --color-bg-subtle: #f7f7fa;
  --color-bg-muted: #ededf2;
  --color-card-header-bg: #f7f7fa;

  /* Border colors */
  --color-border: #e5e5ed;

  /* Accent colors */
  --color-accent: #00c8a0;
  --color-pending-approval: #90EE90;
  --color-pending-approval-text: #000000;

  /* Gradients */
  --gradient-hero: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-light) 50%, var(--color-indigo) 100%);
  --gradient-subtle: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);

  /* Shadows */
  --shadow-color: 26, 26, 46;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.05);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.08);
  --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.12);

  /* Border radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* Layout */
  --container-max: 1200px;
  --section-spacing: 120px;
  --section-spacing-mobile: 80px;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Header icon (SVG encoded) */
  --header-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Custom alert styling to match site accent color */
.alert-success {
  background-color: rgba(0, 200, 160, 0.15);
  border-color: var(--color-accent);
  color: #006650;
}
[data-theme="dark"] .alert-success {
  background-color: rgba(0, 200, 160, 0.2);
  color: #00e6b8;
}

/* Theme: Dark Mode */
[data-theme="dark"] {
  --color-primary: #3b82f6;
  --color-primary-dark: #2563eb;
  --color-primary-light: #60a5fa;
  --color-primary-alpha-15: rgba(59, 130, 246, 0.15);

  --color-navy: #0f172a;
  --color-navy-light: #1e3a5f;
  --color-indigo: #1e40af;

  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;
  --color-text-inverse-85: rgba(15, 23, 42, 0.85);
  --color-text-inverse-70: rgba(15, 23, 42, 0.7);
  --color-text-inverse-30: rgba(15, 23, 42, 0.3);
  --color-text-inverse-20: rgba(15, 23, 42, 0.2);
  --color-text-inverse-15: rgba(15, 23, 42, 0.15);
  --color-text-inverse-10: rgba(15, 23, 42, 0.1);

  --color-bg-overlay: rgba(15, 23, 42, 0.95);

  --color-bg: #0f172a;
  --color-bg-subtle: #1e293b;
  --color-bg-muted: #334155;
  --color-card-header-bg: #1e293b;

  --color-border: #334155;

  --color-accent: #00c8a0;
  --color-pending-approval: #4ade80;
  --color-pending-approval-text: #0f172a;

  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #1e40af 100%);
  --gradient-subtle: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);

  --shadow-color: 0, 0, 0;
  --shadow-sm: 0 1px 2px rgba(var(--shadow-color), 0.2);
  --shadow-md: 0 4px 12px rgba(var(--shadow-color), 0.3);
  --shadow-lg: 0 8px 24px rgba(var(--shadow-color), 0.4);

  --header-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Theme: Color Blind (Deuteranopia-friendly) */
[data-theme="colorblind"] {
  --color-primary: #0077bb;
  --color-primary-dark: #005588;
  --color-primary-light: #33aadd;
  --color-primary-alpha-15: rgba(0, 119, 187, 0.15);

  --color-navy: #0f172a;
  --color-navy-light: #1e3a5f;
  --color-indigo: #0077bb;

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #64748b;
  --color-text-inverse: #ffffff;
  --color-text-inverse-85: rgba(255, 255, 255, 0.85);
  --color-text-inverse-70: rgba(255, 255, 255, 0.7);
  --color-text-inverse-30: rgba(255, 255, 255, 0.3);
  --color-text-inverse-20: rgba(255, 255, 255, 0.2);
  --color-text-inverse-15: rgba(255, 255, 255, 0.15);
  --color-text-inverse-10: rgba(255, 255, 255, 0.1);

  --color-bg-overlay: rgba(255, 255, 255, 0.95);

  --color-bg: #ffffff;
  --color-bg-subtle: #f7f7fa;
  --color-bg-muted: #ededf2;
  --color-card-header-bg: #f7f7fa;

  --color-border: #e5e5ed;

  --color-accent: #ee7733;
  --color-pending-approval: #009988;
  --color-pending-approval-text: #ffffff;

  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e3a5f 50%, #0077bb 100%);
  --gradient-subtle: linear-gradient(180deg, var(--color-bg-subtle) 0%, var(--color-bg) 100%);

  --shadow-color: 26, 26, 46;

  --header-toggler-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}