/* ═══════════════════════════════════════════
   VARIABLES.CSS — Design Tokens (GeoICON Standard)
   Based on 04-DESIGN-TOKENS.md v1.0.0-rc.36
   Default: Light Theme, Overrides: Dark Theme
   ═══════════════════════════════════════════ */

:root {
  /* ── Colors (Light Theme by Default) ── */
  --color-bg-base:       #F8FAFC;
  --color-bg-subtle:     #F1F5F9;
  --color-bg-raised:     #E2E8F0;
  --color-bg-card:       #FFFFFF;
  --color-text-base:     #0F172A;
  --color-text-muted:    #334155;
  --color-text-dim:      #475569;
  --color-grid-lines:    rgba(0, 131, 143, 0.10);

  /* Brand */
  --color-blue:          #00838F;
  --color-blue-light:    #4DD0E1;
  --color-accent:        #8B5B3B;
  --color-purple:        #BC52EE;
  --color-lime:          #00838F;

  /* Semantic */
  --color-success:       #22c55e;
  --color-warning:       #f59e0b;
  --color-danger:        #ef4444;

  /* Borders */
  --color-border:        rgba(0, 131, 143, 0.2);
  --color-border-subtle: rgba(15, 23, 42, 0.08);
  --color-border-hover:  #00838F;

  /* Gradients */
  --gradient-brand:      linear-gradient(135deg, #00838F 0%, #26C6DA 50%, #E0F7FA 100%);
  --gradient-text-accent: linear-gradient(135deg, #8B5B3B 0%, #D4A574 50%, #F7FDFC 100%);
  --gradient-hero:       radial-gradient(ellipse at 40% 50%, rgba(0,131,143,0.06) 0%, transparent 60%),
                         radial-gradient(ellipse at 80% 20%, rgba(188,82,238,0.03) 0%, transparent 50%);
  --gradient-card:       linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);

  /* Header & Navigation */
  --color-header-bg: rgba(248, 250, 252, 0.85);
  --color-header-scrolled: rgba(241, 245, 249, 0.95);
  --color-mobile-drawer: rgba(241, 245, 249, 0.97);
  --shadow-header: 0 4px 24px rgba(15, 23, 42, 0.08);

  /* Glows */
  --glow-brand:          0 0 40px rgba(0, 131, 143, 0.08);
  --glow-blue-sm:        0 0 15px rgba(0, 131, 143, 0.15);
  --shadow-lg:           0 20px 60px rgba(15, 23, 42, 0.08);
  --shadow-card:         0 4px 24px rgba(15, 23, 42, 0.04);

  /* Form Inputs */
  --color-input-bg:      #FFFFFF;
  --color-input-border:  rgba(0, 131, 143, 0.3);
  --color-input-text:    #0F172A;

  /* ── Typography ── */
  --font-display:        'Obviously', system-ui, -apple-system, sans-serif;
  --font-body:           'Obviously', system-ui, -apple-system, sans-serif;

  /* Type Scale */
  --text-hero:           clamp(2rem, 5vw, 3.25rem);
  --text-display:        clamp(1.5rem, 3vw, 2rem);
  --text-heading:        1.5rem;
  --text-subheading:     1.25rem;
  --text-lg:             1.125rem;
  --text-base:           1rem;
  --text-sm:             0.875rem;
  --text-xs:             0.75rem;

  /* ── Spacing (8px grid) ── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── Radii ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Transitions ── */
  --duration-fast:   150ms;
  --duration-base:   250ms;
  --duration-slow:   400ms;
  --ease-default:    cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out:        cubic-bezier(0.0, 0, 0.2, 1);

  /* ── Layout ── */
  --nav-height:    60px;
  --max-width:     1200px;
  --container-pad: clamp(1rem, 5vw, 3rem);
}

/* ── Dark Theme Overrides ── */
html[data-theme="dark"] {
  /* ── Colors ── */
  --color-bg-base:       #12111e;
  --color-bg-subtle:     #0C0F19;
  --color-bg-raised:     #11172A;
  --color-bg-card:       #141829;
  --color-text-base:     #F1F5F9;
  --color-text-muted:    #CBD5E1;
  --color-text-dim:      #94A3B8;
  --color-grid-lines:    rgba(255, 255, 255, 0.08);

  /* Borders */
  --color-border:        rgba(0, 131, 143, 0.15);
  --color-border-subtle: rgba(248, 250, 252, 0.06);
  --color-border-hover:  #00838F;

  /* Gradients */
  --gradient-brand:      linear-gradient(135deg, #00838F 0%, #4DD0E1 50%, #F7FDFC 100%);
  --gradient-hero:       radial-gradient(ellipse at 40% 50%, rgba(0,131,143,0.12) 0%, transparent 60%),
                         radial-gradient(ellipse at 80% 20%, rgba(188,82,238,0.06) 0%, transparent 50%);
  --gradient-card:       linear-gradient(180deg, #1A1835 0%, var(--color-bg-base) 100%);

  /* Header & Navigation */
  --color-header-bg: rgba(18, 17, 30, 0.8);
  --color-header-scrolled: rgba(12, 15, 25, 0.95);
  --color-mobile-drawer: rgba(12, 15, 25, 0.97);
  --shadow-header: 0 4px 24px rgba(0, 0, 0, 0.4);

  /* Glows */
  --glow-brand:          0 0 40px rgba(0, 131, 143, 0.2);
  --glow-blue-sm:        0 0 15px rgba(0, 131, 143, 0.4);
  --shadow-lg:           0 20px 60px rgba(0, 0, 0, 0.4);
  --shadow-card:         0 4px 24px rgba(0, 0, 0, 0.3);

  /* Form Inputs */
  --color-input-bg:      rgba(20, 24, 41, 0.6);
  --color-input-border:  rgba(0, 131, 143, 0.2);
  --color-input-text:    #F1F5F9;
}