/* ============================================================
   Design Tokens — Three Themes
   [data-theme="blue"]  — Brand Blue/Teal  (default, Logo 1)
   [data-theme="amber"] — Brand Amber/Gold (Logo 2)
   [data-theme="dark"]  — Dark Space
   ============================================================ */

/* ─── Shared tokens (unchanged across themes) ─────────────── */
:root {
  --font:       'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
  --section-py: 100px;
  --max-w:      1180px;
  --nav-h:      72px;
  --gap:        24px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-full: 9999px;
  --t-fast: 0.18s ease;
  --t-med:  0.3s ease;
  --t-slow: 0.55s cubic-bezier(0.16,1,0.3,1);
}

/* ─── Theme 1 : Brand Blue / Teal  (Logo 1 colors) ────────── */
:root,
[data-theme="blue"] {
  /* Core palette */
  --accent:         #1A3D6F;
  --accent-2:       #0CB89A;
  --accent-dark:    #122D52;
  --accent-light:   #EBF3FF;
  --accent-mid:     #B8D0F0;
  --bg:             #FFFFFF;
  --bg-2:           #F4F7FF;
  --bg-3:           #E8EEFF;
  --text:           #0F1C33;
  --text-muted:     #4B5B72;
  --text-light:     #8899AF;
  --border:         #DDE4F0;
  --border-dark:    #C5D0E0;
  --success:        #10B981;
  --success-bg:     #ECFDF5;
  --warning:        #F59E0B;

  /* Gradients */
  --grad:           linear-gradient(135deg, #1A3D6F 0%, #0CB89A 100%);
  --grad-r:         linear-gradient(135deg, #0CB89A 0%, #1A3D6F 100%);
  --grad-text:      linear-gradient(135deg, #1A3D6F 0%, #0CB89A 100%);
  --grad-light:     linear-gradient(135deg, #EBF3FF 0%, #E0F7F3 100%);

  /* Hero mesh background */
  --hero-orb-1: rgba(26,61,111,0.07);
  --hero-orb-2: rgba(12,184,154,0.06);
  --hero-orb-3: rgba(26,61,111,0.04);

  /* Card effects */
  --card-border:      rgba(26,61,111,0.10);
  --card-border-h:    rgba(12,184,154,0.35);
  --card-shadow:      0 2px 12px rgba(26,61,111,0.06), 0 1px 3px rgba(26,61,111,0.04);
  --card-shadow-h:    0 8px 32px rgba(26,61,111,0.12), 0 2px 6px rgba(26,61,111,0.06);

  /* Standard shadows */
  --shadow-sm:        0 1px 4px rgba(26,61,111,0.06);
  --shadow-md:        0 4px 16px rgba(26,61,111,0.08), 0 2px 6px rgba(26,61,111,0.04);
  --shadow-lg:        0 10px 40px rgba(26,61,111,0.10), 0 4px 8px rgba(26,61,111,0.05);
  --shadow-accent:    0 6px 24px rgba(26,61,111,0.30);
  --shadow-accent2:   0 6px 24px rgba(12,184,154,0.28);

  /* Nav scrolled glass */
  --nav-glass: rgba(255,255,255,0.90);
}

/* ─── Theme 2 : Brand Amber / Gold  (Logo 2 colors) ───────── */
[data-theme="amber"] {
  --accent:         #E0880A;
  --accent-2:       #E84E08;
  --accent-dark:    #BC7208;
  --accent-light:   #FFF7E8;
  --accent-mid:     #FFD99A;
  --bg:             #FFFDF8;
  --bg-2:           #FFF8EE;
  --bg-3:           #FFEFD4;
  --text:           #1C1008;
  --text-muted:     #6B4E28;
  --text-light:     #9A7450;
  --border:         #F5E0BF;
  --border-dark:    #E8CCA8;
  --success:        #10B981;
  --success-bg:     #ECFDF5;
  --warning:        #F59E0B;

  --grad:           linear-gradient(135deg, #F5A623 0%, #E84E08 100%);
  --grad-r:         linear-gradient(135deg, #E84E08 0%, #F5A623 100%);
  --grad-text:      linear-gradient(135deg, #E0880A 0%, #E84E08 100%);
  --grad-light:     linear-gradient(135deg, #FFF7E8 0%, #FFECD4 100%);

  --hero-orb-1: rgba(245,166,35,0.10);
  --hero-orb-2: rgba(232,78,8,0.07);
  --hero-orb-3: rgba(245,166,35,0.05);

  --card-border:      rgba(232,146,10,0.10);
  --card-border-h:    rgba(232,78,8,0.30);
  --card-shadow:      0 2px 12px rgba(232,146,10,0.06);
  --card-shadow-h:    0 8px 32px rgba(232,146,10,0.14);

  --shadow-sm:        0 1px 4px rgba(232,146,10,0.08);
  --shadow-md:        0 4px 16px rgba(232,146,10,0.10);
  --shadow-lg:        0 10px 40px rgba(232,146,10,0.12);
  --shadow-accent:    0 6px 24px rgba(232,146,10,0.35);
  --shadow-accent2:   0 6px 24px rgba(232,78,8,0.30);

  --nav-glass: rgba(255,253,248,0.92);
}

/* ─── Theme 3 : Dark Space ────────────────────────────────── */
[data-theme="dark"] {
  --accent:         #3B82F6;
  --accent-2:       #0CB89A;
  --accent-dark:    #60A5FA;
  --accent-light:   #0F1E38;
  --accent-mid:     #1A3461;
  --bg:             #060C1A;
  --bg-2:           #0C1629;
  --bg-3:           #12203A;
  --text:           #E8F0FF;
  --text-muted:     #8899B8;
  --text-light:     #556080;
  --border:         #1C2E4A;
  --border-dark:    #263C5E;
  --success:        #34D399;
  --success-bg:     #064E3B;
  --warning:        #FBBF24;

  --grad:           linear-gradient(135deg, #3B82F6 0%, #0CB89A 100%);
  --grad-r:         linear-gradient(135deg, #0CB89A 0%, #3B82F6 100%);
  --grad-text:      linear-gradient(135deg, #60A5FA 0%, #0CB89A 100%);
  --grad-light:     linear-gradient(135deg, #0F1E38 0%, #0A2820 100%);

  --hero-orb-1: rgba(59,130,246,0.14);
  --hero-orb-2: rgba(12,184,154,0.10);
  --hero-orb-3: rgba(59,130,246,0.07);

  --card-border:      rgba(59,130,246,0.12);
  --card-border-h:    rgba(12,184,154,0.28);
  --card-shadow:      0 2px 12px rgba(0,0,0,0.30);
  --card-shadow-h:    0 8px 32px rgba(0,0,0,0.45);

  --shadow-sm:        0 1px 4px rgba(0,0,0,0.40);
  --shadow-md:        0 4px 16px rgba(0,0,0,0.45);
  --shadow-lg:        0 10px 40px rgba(0,0,0,0.55);
  --shadow-accent:    0 6px 24px rgba(59,130,246,0.35);
  --shadow-accent2:   0 6px 24px rgba(12,184,154,0.30);

  --nav-glass: rgba(6,12,26,0.92);
}