/* ============================================================
   Customer Growth & Delivery — themes.css
   6 themes. First defined = default (no data-theme needed).
   Theme persists via localStorage key "tf-theme".
   ============================================================ */

/* ── 1. Modern Navy (default) ──────────────────────────────── */
[data-theme="navy"],
:root {
  --color-navy-950: #0B1F33;
  --color-navy-900: #102A43;
  --color-navy-800: #163A59;
  --color-slate-800: #334E68;
  --color-slate-700: #486581;
  --color-bluegray-500: #627D98;
  --color-bluegray-400: #829AB1;
  --color-bluegray-300: #B6C5D4;

  --color-ivory-100: #F5F1E8;
  --color-warm-white: #FBFAF7;
  --color-surface: #FFFFFF;
  --color-border: #D9E2EC;
  --color-border-soft: #E7EDF3;

  --color-teal-700: #286768;
  --color-teal-600: #2F7A7B;
  --color-teal-500: #3F8E8F;
  --color-accent-soft: #DCEEEE;

  --color-heading: var(--color-navy-900);
  --color-body-text: #243B53;
  --color-muted-text: #52606D;
  --color-inverse-text: #F8FAFC;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(11, 31, 51, 0.12);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --font-display: "Inter", "Aptos", "Segoe UI", Arial, sans-serif;
  --font-body: "Inter", "Aptos", "Segoe UI", Arial, sans-serif;
  --container-max: 1200px;
}

/* ── 2. Slate & Steel ──────────────────────────────────────── */
[data-theme="slate"] {
  --color-navy-950: #111827;
  --color-navy-900: #1F2937;
  --color-navy-800: #374151;
  --color-slate-800: #4B5563;
  --color-slate-700: #6B7280;
  --color-bluegray-500: #9CA3AF;
  --color-bluegray-400: #D1D5DB;
  --color-bluegray-300: #E5E7EB;

  --color-ivory-100: #F3F4F6;
  --color-warm-white: #F9FAFB;
  --color-surface: #FFFFFF;
  --color-border: #D1D5DB;
  --color-border-soft: #E5E7EB;

  --color-teal-700: #0369A1;
  --color-teal-600: #0284C7;
  --color-teal-500: #0EA5E9;
  --color-accent-soft: #E0F2FE;

  --color-heading: var(--color-navy-900);
  --color-body-text: #374151;
  --color-muted-text: #6B7280;
  --color-inverse-text: #F9FAFB;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(17, 24, 39, 0.12);
}

/* ── 3. Deep Forest ────────────────────────────────────────── */
[data-theme="forest"] {
  --color-navy-950: #0A1F0E;
  --color-navy-900: #12291A;
  --color-navy-800: #1C3D27;
  --color-slate-800: #2D5A3D;
  --color-slate-700: #3D7A53;
  --color-bluegray-500: #6B9F7E;
  --color-bluegray-400: #9EC4AF;
  --color-bluegray-300: #C8DDD2;

  --color-ivory-100: #F0F4F1;
  --color-warm-white: #F7FAF8;
  --color-surface: #FFFFFF;
  --color-border: #C8DDD2;
  --color-border-soft: #DEE9E3;

  --color-teal-700: #1D6E45;
  --color-teal-600: #22835A;
  --color-teal-500: #28A06E;
  --color-accent-soft: #D4EDE0;

  --color-heading: var(--color-navy-900);
  --color-body-text: #1C3D27;
  --color-muted-text: #4A7060;
  --color-inverse-text: #F7FAF8;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(10, 31, 14, 0.12);
}

/* ── 4. Warm Charcoal ──────────────────────────────────────── */
[data-theme="charcoal"] {
  --color-navy-950: #1A1614;
  --color-navy-900: #28221F;
  --color-navy-800: #3D3430;
  --color-slate-800: #5C504A;
  --color-slate-700: #7A6C65;
  --color-bluegray-500: #9E9089;
  --color-bluegray-400: #C2B8B3;
  --color-bluegray-300: #DDD6D2;

  --color-ivory-100: #F5F0EB;
  --color-warm-white: #FBF8F5;
  --color-surface: #FFFFFF;
  --color-border: #DDD6D2;
  --color-border-soft: #EAE5E1;

  --color-teal-700: #B5541A;
  --color-teal-600: #C96020;
  --color-teal-500: #DE7530;
  --color-accent-soft: #FCE8D8;

  --color-heading: var(--color-navy-900);
  --color-body-text: #3D3430;
  --color-muted-text: #6B5C55;
  --color-inverse-text: #FBF8F5;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(26, 22, 20, 0.12);
}

/* ── 5. Cobalt & White ─────────────────────────────────────── */
[data-theme="cobalt"] {
  --color-navy-950: #0C1B4D;
  --color-navy-900: #122369;
  --color-navy-800: #1A3285;
  --color-slate-800: #2B4DAE;
  --color-slate-700: #3D65C4;
  --color-bluegray-500: #6B8FD4;
  --color-bluegray-400: #9DB5E4;
  --color-bluegray-300: #C7D7F1;

  --color-ivory-100: #F0F3FB;
  --color-warm-white: #F7F9FD;
  --color-surface: #FFFFFF;
  --color-border: #C7D7F1;
  --color-border-soft: #DDE6F6;

  --color-teal-700: #6C3FC0;
  --color-teal-600: #7C4DD4;
  --color-teal-500: #9265E0;
  --color-accent-soft: #EDE6FD;

  --color-heading: var(--color-navy-900);
  --color-body-text: #1A3285;
  --color-muted-text: #4A65B0;
  --color-inverse-text: #F7F9FD;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(12, 27, 77, 0.13);
}

/* ── 6. Sand & Sienna ──────────────────────────────────────── */
[data-theme="sand"] {
  --color-navy-950: #2C1A0E;
  --color-navy-900: #3D2612;
  --color-navy-800: #5A3B1F;
  --color-slate-800: #7A5430;
  --color-slate-700: #9A6E45;
  --color-bluegray-500: #C09268;
  --color-bluegray-400: #D9BA9A;
  --color-bluegray-300: #EDD8C0;

  --color-ivory-100: #FAF4EB;
  --color-warm-white: #FEF9F3;
  --color-surface: #FFFFFF;
  --color-border: #E8D5BC;
  --color-border-soft: #F0E3CE;

  --color-teal-700: #8B3A1A;
  --color-teal-600: #A84520;
  --color-teal-500: #C4582A;
  --color-accent-soft: #FBEADA;

  --color-heading: var(--color-navy-900);
  --color-body-text: #4A3018;
  --color-muted-text: #7A5C3A;
  --color-inverse-text: #FEF9F3;

  --color-background: var(--color-ivory-100);
  --color-link: var(--color-teal-700);
  --color-link-hover: var(--color-teal-600);
  --color-button-primary: var(--color-teal-600);
  --color-button-primary-hover: var(--color-teal-700);
  --color-button-secondary-border: rgba(255, 255, 255, 0.45);
  --color-shadow: rgba(44, 26, 14, 0.12);
}