@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,600;0,700;1,600;1,700&family=Raleway:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* Typography Families */
  --font-headline: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Raleway', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-eyebrow: 'Montserrat', sans-serif;
  --font-brand: 'Raleway', sans-serif;

  /* Spacing Scale — increased for more breathing room */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 40px;
  --space-6: 64px;
  --space-8: 96px;
  --space-10: 128px;

  /* Section vertical padding */
  --section-padding: 96px;

  /* Layout Boundaries */
  --max-width: 1280px;
  --nav-max-width: 1440px;
  --nav-height: 72px;

  /* Border Radii Tokens */
  --radius-sm: 0.125rem;
  --radius-default: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1.25rem;
  --radius-pill: 9999px;

  --radius-card: var(--radius-2xl);
  --radius-feature: var(--radius-2xl);

  /* Global Fixed Palette */
  --color-electric-lime: #bdd139;
  --color-primary-dark: #97aa07;
  --color-on-primary: #2d3400;
  --color-surface-dark: #0C2B40;
  --color-blaster-blue: #0C2B40;
}

/* ==========================================================================
   DARK MODE (Default Theme)
   ========================================================================== */
:root, [data-theme="dark"] {
  /* Canvas & Backgrounds */
  --bg-canvas: #0d1117;
  --bg-nav: rgba(13, 17, 23, 0.92);
  --bg-secondary: #151b22;
  --bg-card: #161b22;
  --bg-card-hover: #21262d;
  --bg-pill: #bdd139;
  --text-pill: #2d3400;
  --bg-input: #161b22;

  /* Section band tokens */
  --bg-band-a: #0d1117;           /* default canvas — dark sections */
  --bg-band-b: #0C2B40;           /* Blaster blue — contrasted sections */
  --bg-band-b-card: #0f3352;      /* cards inside band-b */
  --bg-band-b-border: rgba(189, 209, 57, 0.18);

  /* Text & Hierarchies */
  --text-primary: #e6edf3;
  --text-secondary: #8b949e;
  --text-tertiary: #6e7681;
  --text-inverse: #0C2B40;

  /* Text on band-b sections */
  --text-on-band-b-primary: #e6edf3;
  --text-on-band-b-secondary: #94a3b8;

  /* Accents & Borders */
  --accent-primary: #bdd139;
  --accent-secondary: #97aa07;
  --accent-glow: rgba(189, 209, 57, 0.15);
  --border-muted: #30363d;
  --border-subtle: #21262d;
  --border-card: rgba(189, 209, 57, 0.25);

  /* Gradients & Halo Effects */
  --bg-cosmic-gradient:
    radial-gradient(ellipse at 60% -10%, rgba(189, 209, 57, 0.12) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(12, 43, 64, 0.5) 0%, transparent 50%);
  --shadow-mockup: inset 0 0 0 1px #30363d, 0 0 60px rgba(189, 209, 57, 0.12);
  --shadow-player: 0 24px 48px rgba(0, 0, 0, 0.8);
  --shadow-pill: 0 4px 14px rgba(189, 209, 57, 0.25);
  --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   LIGHT MODE Theme Adaptation
   ========================================================================== */
[data-theme="light"] {
  /* Canvas & Backgrounds */
  --bg-canvas: #f4f6f8;
  --bg-nav: rgba(255, 255, 255, 0.94);
  --bg-secondary: #eaecf0;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f2f5;
  --bg-pill: #0C2B40;
  --text-pill: #bdd139;
  --bg-input: #ffffff;

  /* Section band tokens */
  --bg-band-a: #f4f6f8;           /* default canvas — light sections */
  --bg-band-b: #0C2B40;           /* Blaster blue — contrasted sections (same blue) */
  --bg-band-b-card: #0f3352;      /* cards inside band-b */
  --bg-band-b-border: rgba(189, 209, 57, 0.25);

  /* Text & Hierarchies */
  --text-primary: #0d1117;
  --text-secondary: #464e59;
  --text-tertiary: #6e7681;
  --text-inverse: #ffffff;

  /* Text on band-b sections (same as dark since both use the blue) */
  --text-on-band-b-primary: #e6edf3;
  --text-on-band-b-secondary: #94a3b8;

  /* Accents & Borders */
  --accent-primary: #758500;
  --accent-secondary: #97aa07;
  --accent-glow: rgba(117, 133, 0, 0.12);
  --border-muted: #d0d7de;
  --border-subtle: #e1e4e8;
  --border-card: rgba(117, 133, 0, 0.2);

  /* Gradients & Halo Effects */
  --bg-cosmic-gradient:
    radial-gradient(ellipse at 60% -10%, rgba(151, 170, 7, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(12, 43, 64, 0.04) 0%, transparent 50%);
  --shadow-mockup: inset 0 0 0 1px rgba(117, 133, 0, 0.25), 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-player: 0 16px 36px rgba(0, 0, 0, 0.1);
  --shadow-pill: 0 4px 12px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.06);
}