/* ==========================================================================
   Theme: Frost — Glassmorphism panels, frosted blur, soft blue depth
   Palette: Blue / White | Vibe: Clean, professional, trustworthy
   ========================================================================== */

:root {
  /* Primary palette */
  --color-primary:           #3b82f6;
  --color-primary-light:     #60a5fa;
  --color-primary-dark:      #1e40af;
  --color-secondary:         #818cf8;
  --color-secondary-light:   #a5b4fc;
  --color-accent:            #38bdf8;

  /* Accent utility */
  --color-gold:              #f59e0b;
  --color-dark-surface:      #1a1a2e;

  /* Backgrounds */
  --color-bg:                #f0f9ff;
  --color-bg-alt:            #e0f2fe;
  --color-surface:           rgba(255, 255, 255, 0.7);
  --color-surface-hover:     rgba(255, 255, 255, 0.85);
  --color-surface-border:    rgba(37, 99, 235, 0.12);
  --color-surface-solid:     #ffffff;

  /* Text */
  --color-text:              #1e3a5f;
  --color-text-secondary:    #57708c;
  --color-text-muted:        #94a3b8;
  --color-heading:           #0f172a;

  /* CTA */
  --color-cta:               #3b82f6;
  --color-cta-hover:         #2563eb;
  --color-cta-text:          #ffffff;
  --gradient-cta:            linear-gradient(135deg, #3b82f6 0%, #818cf8 100%);

  /* Gradients & effects */
  --gradient-hero:           linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);
  --gradient-card:           linear-gradient(180deg, rgba(255,255,255,0.8) 0%, rgba(219,234,254,0.4) 100%);
  --shadow-card:             0 4px 24px rgba(59, 130, 246, 0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-card-hover:       0 10px 40px rgba(59, 130, 246, 0.18), 0 2px 8px rgba(0,0,0,0.08);
  --shadow-glow:             0 0 20px rgba(59, 130, 246, 0.3);
  --shadow-cta:              0 4px 20px rgba(59, 130, 246, 0.4);
  --border-subtle:           1px solid rgba(59, 130, 246, 0.15);

  /* Glassmorphism base */
  --glass-bg:                rgba(255, 255, 255, 0.65);
  --glass-border:            1px solid rgba(255, 255, 255, 0.5);
  --glass-blur:              blur(12px);
  --glass-shadow:            0 8px 32px rgba(59, 130, 246, 0.12);

  /* Border radius */
  --border-radius-sm:        8px;
  --border-radius-md:        12px;
  --border-radius-lg:        16px;
  --border-radius-xl:        24px;
  --border-radius-full:      9999px;

  /* Typography */
  --font-heading:            'Inter', 'SF Pro Display', system-ui, sans-serif;
  --font-body:               'Inter', 'SF Pro Text', system-ui, sans-serif;
  --font-mono:               'JetBrains Mono', 'Fira Code', monospace;
  --font-size-xs:            0.75rem;
  --font-size-sm:            0.875rem;
  --font-size-base:          1rem;
  --font-size-lg:            1.125rem;
  --font-size-xl:            1.25rem;
  --font-size-2xl:           1.5rem;
  --font-size-3xl:           1.875rem;
  --font-size-4xl:           2.25rem;
  --font-weight-normal:      400;
  --font-weight-medium:      500;
  --font-weight-semibold:    600;
  --font-weight-bold:        700;
  --font-weight-extrabold:   800;

  /* Spacing */
  --space-xs:                0.25rem;
  --space-sm:                0.5rem;
  --space-md:                1rem;
  --space-lg:                1.5rem;
  --space-xl:                2rem;
  --space-2xl:               3rem;
  --space-3xl:               4rem;

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

@keyframes frost-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes frost-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-6px); }
}

@media (max-width: 768px) {
  :root {
    --font-size-3xl: 1.5rem;
    --font-size-4xl: 1.875rem;
    --space-2xl:     2rem;
    --space-3xl:     2.5rem;
  }
}

@media (max-width: 480px) {
  :root {
    --font-size-2xl: 1.25rem;
    --font-size-3xl: 1.375rem;
    --space-xl:      1.5rem;
  }
}