@charset "UTF-8";
:root {
  /* -- Backgrounds (Light Mode) -- */
  --bg-page:            #FFFFFF;
  --bg-soft:            #F4F6FA;
  --bg-card:            #FFFFFF;
  --bg-card-hover:      #FAFBFD;
  --bg-dark:            #0F1729;
  --bg-dark-soft:       #1A2440;
  --bg-nav:             rgba(255, 255, 255, 0.85);
  --bg-nav-scrolled:    rgba(255, 255, 255, 0.95);

  /* -- Text -- */
  --text-primary:       #0F1729;
  --text-secondary:     #4B5578;
  --text-muted:         #8892AB;
  --text-on-dark:       #FFFFFF;
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);

  /* -- Brand Gradients -- */
  --gradient-hero:      linear-gradient(135deg, #0F1729 0%, #1E3A5F 50%, #0D9488 100%);
  --gradient-primary:   linear-gradient(135deg, #10B981, #0D9488);
  --gradient-primary-hover: linear-gradient(135deg, #059669, #0F766E);
  --gradient-violet:    linear-gradient(135deg, #8B5CF6, #6366F1);
  --gradient-warm:      linear-gradient(135deg, #F59E0B, #EF4444);
  --gradient-sky:       linear-gradient(135deg, #38BDF8, #3B82F6);
  --gradient-marquee:   linear-gradient(90deg, #10B981, #0D9488, #3B82F6, #8B5CF6, #10B981);
  --gradient-cta:       linear-gradient(135deg, #0F1729 0%, #1E3A5F 40%, #0D9488 100%);

  /* -- Accent Colors -- */
  --accent-emerald:       #10B981;
  --accent-emerald-light: #D1FAE5;
  --accent-emerald-bg:    rgba(16, 185, 129, 0.08);
  --accent-teal:          #0D9488;
  --accent-blue:          #3B82F6;
  --accent-blue-light:    #DBEAFE;
  --accent-blue-bg:       rgba(59, 130, 246, 0.08);
  --accent-violet:        #8B5CF6;
  --accent-violet-light:  #EDE9FE;
  --accent-violet-bg:     rgba(139, 92, 246, 0.08);
  --accent-amber:         #F59E0B;
  --accent-amber-light:   #FEF3C7;
  --accent-amber-bg:      rgba(245, 158, 11, 0.08);
  --accent-red:           #EF4444;
  --accent-red-light:     #FEE2E2;
  --accent-red-bg:        rgba(239, 68, 68, 0.08);
  --accent-coral:         #F97316;

  /* -- Typography -- */
  --font-heading:   'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;

  --text-hero:      clamp(2.75rem, 6vw, 4.5rem);
  --text-section:   clamp(2rem, 4vw, 3rem);
  --text-lg:        clamp(1.25rem, 2vw, 1.5rem);
  --text-subtitle:  clamp(1.05rem, 1.5vw, 1.2rem);
  --text-body:      1rem;
  --text-small:     0.875rem;
  --text-xs:        0.75rem;
  --text-stat:      clamp(2.25rem, 4vw, 3.5rem);

  /* -- Spacing -- */
  --space-section:  clamp(80px, 10vw, 120px);
  --space-block:    64px;
  --space-card:     28px;
  --space-grid:     24px;
  --space-inline:   16px;
  --space-tight:    8px;
  --nav-height:     72px;

  /* -- Layout -- */
  --max-content:    1200px;
  --max-hero:       1300px;

  /* -- Radii -- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* -- Shadows -- */
  --shadow-xs:   0 1px 2px rgba(15, 23, 41, 0.04);
  --shadow-sm:   0 2px 8px rgba(15, 23, 41, 0.06);
  --shadow-md:   0 4px 16px rgba(15, 23, 41, 0.08);
  --shadow-lg:   0 8px 32px rgba(15, 23, 41, 0.1);
  --shadow-xl:   0 16px 48px rgba(15, 23, 41, 0.12);
  --shadow-glow-emerald: 0 4px 20px rgba(16, 185, 129, 0.3);
  --shadow-glow-violet:  0 4px 20px rgba(139, 92, 246, 0.3);
  --shadow-card: 0 1px 3px rgba(15, 23, 41, 0.04), 0 4px 12px rgba(15, 23, 41, 0.06);
  --shadow-card-hover: 0 8px 30px rgba(15, 23, 41, 0.1), 0 2px 8px rgba(15, 23, 41, 0.06);

  /* -- Borders -- */
  --border-light:  1px solid rgba(15, 23, 41, 0.08);
  --border-medium: 1px solid rgba(15, 23, 41, 0.12);

  /* -- Transitions -- */
  --ease-out:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast:   150ms;
  --duration-normal: 300ms;
  --duration-slow:   600ms;

  /* -- Z -- */
  --z-base: 1;
  --z-card: 10;
  --z-nav:  100;
  --z-overlay: 200;

  /* -- Theme transition -- */
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ===========================================
   DARK THEME
   =========================================== */

[data-theme="dark"] {
  --bg-page:            #0B1120;
  --bg-soft:            #131B2E;
  --bg-card:            #1A2440;
  --bg-card-hover:      #223052;
  --bg-dark:            #060D1A;
  --bg-dark-soft:       #0F1729;
  --bg-nav:             rgba(11, 17, 32, 0.88);
  --bg-nav-scrolled:    rgba(11, 17, 32, 0.96);

  --text-primary:       #F1F5F9;
  --text-secondary:     #94A3B8;
  --text-muted:         #64748B;

  --gradient-hero:      linear-gradient(135deg, #060D1A 0%, #0F1F3D 50%, #0A3D37 100%);
  --gradient-cta:       linear-gradient(135deg, #060D1A 0%, #0F1F3D 40%, #0A3D37 100%);

  --accent-emerald-light: rgba(16, 185, 129, 0.15);
  --accent-emerald-bg:    rgba(16, 185, 129, 0.12);
  --accent-blue-light:    rgba(59, 130, 246, 0.15);
  --accent-blue-bg:       rgba(59, 130, 246, 0.12);
  --accent-violet-light:  rgba(139, 92, 246, 0.15);
  --accent-violet-bg:     rgba(139, 92, 246, 0.12);
  --accent-amber-light:   rgba(245, 158, 11, 0.15);
  --accent-amber-bg:      rgba(245, 158, 11, 0.12);
  --accent-red-light:     rgba(239, 68, 68, 0.15);
  --accent-red-bg:        rgba(239, 68, 68, 0.12);

  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm:   0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.4);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.45);
  --shadow-xl:   0 16px 48px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.25);
  --shadow-card-hover: 0 8px 30px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);

  --border-light:  1px solid rgba(255, 255, 255, 0.06);
  --border-medium: 1px solid rgba(255, 255, 255, 0.1);
  --border-color:  #2D3A52;

  color-scheme: dark;
}