/* ============================================================
   DvSum Website — Theme System
   THE ONLY FILE TO TOUCH FOR PALETTE CHANGES
   Brand constants never change. Theme tokens switch per [data-theme].
   ============================================================ */

:root {
  /* Brand constants — never theme-dependent */
  --dv-orange:      #F05000;
  --dv-teal:        #28B4C8;
  --dv-orange-dim:         rgba(240, 80, 0, 0.12);
  --dv-orange-bg-subtle:    rgba(240, 80, 0, 0.03);
  --dv-orange-border:       rgba(240, 80, 0, 0.20);
  --dv-orange-border-strong: rgba(240, 80, 0, 0.30);
  --dv-teal-dim:            rgba(40, 180, 200, 0.12);
  --dv-teal-bg-subtle:      rgba(40, 180, 200, 0.06);
  --dv-teal-border:         rgba(40, 180, 200, 0.25);
  --dv-teal-border-strong:  rgba(40, 180, 200, 0.30);
  --dv-green:               #22C55E;  /* Status: live/active indicator */
  --dv-green-dim:           rgba(34, 197, 94, 0.12); /* Green status bg */
  --dv-navy-dark:           #0A1628;  /* Decorative card vignette gradient start */
  --dv-navy-deep:           #0D2040;  /* Decorative card vignette gradient end */
  --bg-hero:        #0D0D0D;  /* Always-dark hero background — never flips with theme */
  --text-hero-color: #F0F0F0;  /* Always-light text on dark/hero sections */
  --border-hero:    rgba(255,255,255,0.08); /* Subtle border on always-dark hero */
  --text-hero-dim:  rgba(240,240,240,0.6);  /* Dimmed body text on hero */
  --text-hero-mute: rgba(240,240,240,0.35); /* Muted scope text on hero */

  /* Typography */
  --font-display: 'Cabinet Grotesk', sans-serif;
  --font-body:    'Satoshi', sans-serif;

  /* Type scale */
  --text-hero: clamp(48px, 6vw, 80px);
  --text-4xl:  clamp(36px, 4.5vw, 56px);
  --text-3xl:  clamp(28px, 3.5vw, 40px);
  --text-2xl:  clamp(22px, 2.5vw, 28px);
  --text-xl:   clamp(18px, 2vw, 22px);
  --text-lg:   18px;
  --text-base: 16px;
  --text-sm:   14px;
  --text-xs:   12px;

  /* Spacing scale (8px base) */
  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;
  --space-16:  128px;

  /* Layout */
  --max-width:     1280px;
  --section-py:    clamp(64px, 8vw, 120px);
  --container-px:  clamp(24px, 5vw, 80px);

  /* Radius */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   400ms ease;
  --transition-theme:  200ms ease;
}

/* ── LIGHT THEME (default) ── */
[data-theme="light"] {
  --bg-page:        #FFFFFF;
  --bg-surface:     #F7F7F7;
  --bg-card:        #FFFFFF;
  --bg-inverse:     #0D0D0D;
  --text-primary:   #0E0E0E;
  --text-secondary: #4A4A4A;
  --text-muted:     #8A8A8A;
  --text-inverse:   #F0F0F0;
  --border:         #D6D6D6;
  --border-light:   #EDEDED;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.12);
  --nav-bg:         rgba(255,255,255,0.92);
  --nav-border:     rgba(214,214,214,0.8);
}

/* ── DARK THEME ── */
[data-theme="dark"] {
  --bg-page:        #0D0D0D;
  --bg-surface:     #161616;
  --bg-card:        #1E1E1E;
  --bg-inverse:     #F7F7F7;
  --text-primary:   #F0F0F0;
  --text-secondary: #A0A0A0;
  --text-muted:     #606060;
  --text-inverse:   #0E0E0E;
  --border:         #2A2A2A;
  --border-light:   #1E1E1E;
  --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
  --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
  --nav-bg:         rgba(13,13,13,0.92);
  --nav-border:     rgba(42,42,42,0.8);
}