/**
 * LeapsGo Design System - Design Tokens & Variables
 * Clean, maintainable, WordPress-conversion-ready CSS tokens.
 */

:root {
  /* Brand Color Palette */
  --lg-bg-base: #080a0e;
  --lg-bg-surface: #0f1218;
  --lg-bg-card: #141720;
  --lg-bg-card-hover: #1a1e2a;
  --lg-bg-glass: rgba(18, 22, 30, 0.75);
  --lg-bg-glass-nav: rgba(12, 15, 20, 0.82);

  /* Primary Accent: Electric LeapsGo Orange */
  --lg-primary: #ff4500;
  --lg-primary-hover: #ff591a;
  --lg-primary-light: #ff7033;
  --lg-primary-glow: rgba(255, 69, 0, 0.28);
  --lg-primary-subtle: rgba(255, 69, 0, 0.12);

  /* Secondary & Neutral Tones */
  --lg-border-subtle: rgba(255, 255, 255, 0.08);
  --lg-border-strong: rgba(255, 255, 255, 0.16);
  --lg-border-active: rgba(255, 69, 0, 0.45);

  --lg-text-primary: #ffffff;
  --lg-text-secondary: #9da4b2;
  --lg-text-muted: #626978;
  --lg-text-dark: #080a0e;

  /* Typography Stacks */
  --lg-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --lg-font-serif: 'Instrument Serif', Georgia, serif;

  /* Spacing Scale */
  --lg-space-xs: 0.5rem;   /* 8px */
  --lg-space-sm: 0.75rem;  /* 12px */
  --lg-space-md: 1rem;     /* 16px */
  --lg-space-lg: 1.5rem;   /* 24px */
  --lg-space-xl: 2rem;     /* 32px */
  --lg-space-2xl: 3rem;    /* 48px */
  --lg-space-3xl: 4.5rem;  /* 72px */
  --lg-space-4xl: 6rem;    /* 96px */
  --lg-space-5xl: 8rem;    /* 128px */

  /* Containers */
  --lg-container-max: 1340px;
  --lg-container-pad: 1.5rem;

  /* Border Radii */
  --lg-radius-sm: 8px;
  --lg-radius-md: 14px;
  --lg-radius-lg: 22px;
  --lg-radius-card: 32px;
  --lg-radius-island: 40px;
  --lg-radius-pill: 9999px;

  /* Transitions */
  --lg-transition-fast: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  --lg-transition-normal: 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  --lg-transition-smooth: 0.55s cubic-bezier(0.16, 1, 0.3, 1);

  /* Shadows & Atmospheric Glows */
  --lg-shadow-card: 0 20px 45px -15px rgba(0, 0, 0, 0.6);
  --lg-shadow-glow: 0 10px 30px -5px rgba(255, 69, 0, 0.3);
  --lg-shadow-floating: 0 30px 60px -15px rgba(0, 0, 0, 0.7);
}

@media (max-width: 768px) {
  :root {
    --lg-radius-island: 24px;
    --lg-radius-card: 20px;
    --lg-space-3xl: 3.5rem;
    --lg-space-4xl: 4.5rem;
    --lg-space-5xl: 5.5rem;
  }
}