/* ==========================================================================
   Cloud College — Design Tokens
   ========================================================================== */
:root {
  /* Color — surfaces */
  --bg: hsl(222 47% 6%);
  --bg-alt: hsl(222 44% 8%);
  --surface: hsl(222 40% 12% / 0.62);
  --surface-solid: hsl(222 38% 12%);
  --surface-hover: hsl(222 40% 16% / 0.75);
  --border: hsl(215 40% 60% / 0.14);
  --border-strong: hsl(215 50% 70% / 0.26);

  /* Color — brand */
  --primary: hsl(199 95% 55%);
  --primary-strong: hsl(199 95% 48%);
  --primary-soft: hsl(199 95% 55% / 0.14);
  --accent: hsl(258 90% 68%);
  --accent-soft: hsl(258 90% 66% / 0.14);
  --success: hsl(158 64% 52%);
  --success-soft: hsl(158 64% 52% / 0.14);
  --danger: hsl(0 84% 66%);

  /* Color — text */
  --text: hsl(210 40% 96%);
  --text-soft: hsl(214 32% 84%);
  --muted: hsl(215 20% 65%);

  /* Gradients */
  --grad-brand: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  --grad-text: linear-gradient(120deg, hsl(195 100% 70%) 0%, hsl(199 95% 60%) 35%, hsl(258 90% 74%) 100%);
  --grad-surface: linear-gradient(160deg, hsl(222 40% 14% / 0.8), hsl(222 40% 9% / 0.6));

  /* Typography */
  --font-display: "Outfit", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.78rem;
  --fs-sm: 0.9rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: clamp(1.2rem, 1.1rem + 0.4vw, 1.4rem);
  --fs-xl: clamp(1.45rem, 1.25rem + 0.8vw, 1.85rem);
  --fs-2xl: clamp(1.9rem, 1.5rem + 1.6vw, 2.75rem);
  --fs-3xl: clamp(2.4rem, 1.7rem + 3vw, 4rem);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-y: clamp(4.5rem, 3rem + 6vw, 8rem);

  /* Layout */
  --container: 1200px;
  --container-narrow: 820px;
  --header-h: 72px;

  /* Radii */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 2px 8px hsl(222 60% 2% / 0.35);
  --shadow-md: 0 12px 32px -8px hsl(222 60% 2% / 0.6);
  --shadow-lg: 0 30px 60px -20px hsl(222 60% 2% / 0.75);
  --glow-primary: 0 0 0 1px hsl(199 95% 55% / 0.35), 0 12px 40px -10px hsl(199 95% 55% / 0.45);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 700ms;
}