/* ============================================================
   SPACE CLOUDS - Design Tokens
   All CSS custom properties derived from Figma design specs
   ============================================================ */

:root {
  /* ---- Background Colors ---- */
  --sc-bg-primary: #101010;
  --sc-bg-secondary: #181818;
  --sc-bg-gradient: radial-gradient(
    circle at center,
    rgba(26, 26, 26, 1) 0%,
    rgba(21, 21, 21, 1) 50%,
    rgba(16, 16, 16, 1) 100%
  );

  /* ---- Text Colors (WCAG AA: primary/secondary on dark bg meet 4.5:1+) ---- */
  --sc-text-primary: #ffffff;
  --sc-text-secondary: rgba(255, 255, 255, 0.9);
  --sc-text-muted: rgba(255, 255, 255, 0.6); /* Use for non-essential/secondary info only */

  /* ---- Accent Colors ---- */
  --sc-purple-start: #b694eb;
  --sc-purple-end: #a594fd;
  --sc-purple-gradient: linear-gradient(
    to top,
    #b694eb 42.857%,
    #a594fd 90.476%
  );
  --sc-gold: #c5a572;

  /* ---- Badge Colors ---- */
  --sc-badge-upcoming: #4ade80;
  --sc-badge-past: rgba(255, 255, 255, 0.5);
  --sc-badge-sold-out: #ef4444;
  --sc-badge-members: #a594fd;
  --sc-badge-limited: #f59e0b;

  /* ---- Border & Edges ---- */
  --sc-border-light: rgba(255, 255, 255, 0.1);
  --sc-border-focus: rgba(182, 148, 235, 0.6);

  /* ---- Shadows ---- */
  --sc-shadow-nav: 0px 0px 26.9px 0px #b694eb;
  --sc-shadow-button: 0px 4px 4px 0px #b694eb;
  --sc-shadow-button-hover: 0px 6px 12px 0px rgba(182, 148, 235, 0.4);
  --sc-shadow-prompt: 0 2px 12px rgba(182, 148, 235, 0.28);
  --sc-shadow-card: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
  --sc-shadow-card-hover: 0px 12px 24px 0px rgba(182, 148, 235, 0.2);
  --sc-shadow-input-active: 0 10px 30px rgba(170, 90, 255, 0.25);

  /* ---- Font Families ---- */
  --font-heading: 'Space Grotesk', sans-serif;
  --font-heading-alt: 'Epilogue', serif;
  --font-body: 'PP Neue Montreal', 'Inter', sans-serif;

  /* ---- Font Sizes ---- */
  --fs-hero-main: 64px;
  --fs-hero-sub: 48px;
  --fs-hero-support: 36px;
  --fs-section-header: 64px;
  --fs-button-large: 48px;
  --fs-button-cta: 32px;
  --fs-card-title: 32px;
  --fs-card-desc: 32px;
  --fs-nav: 14px;
  --fs-footer-body: 16px;
  --fs-footer-hours: 20px;
  --fs-footer-small: 13px;
  --fs-footer-copyright: 14px;

  /* ---- Line Heights ---- */
  --lh-hero: 72px;
  --lh-support: 40px;
  --lh-card: 24px;
  --lh-nav: 20px;
  --lh-section-header: 72px;

  /* ---- Spacing Scale (8px grid) ---- */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 64px;
  --space-2xl: 120px;

  /* ---- Container ---- */
  --container-max: 1680px;
  --container-padding: 120px;

  /* ---- Border Radius ---- */
  --radius-nav: 30px;
  --radius-card: 30px;
  --radius-button: 30px;
  --radius-full: 9999px;

  /* ---- Nav Dimensions ---- */
  --nav-height: 68px;
  --nav-top: 70px;
  --nav-side-padding: 142px;

  /* ---- Transitions ---- */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}

/* Responsive: reduce spacing so layout fits viewport (order: wider first) */
@media (max-width: 1200px) {
  :root {
    --container-padding: 40px;
    --nav-side-padding: 40px;
  }
}

@media (max-width: 1024px) {
  :root {
    --container-padding: 40px;
    --nav-side-padding: 24px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 20px;
    --nav-side-padding: 16px;
  }
}