:root {
  /* Brand */
  --blue-primary: #007AFF;
  --blue-light:   #5AC8FA;
  --blue-deep:    #0051D5;
  --blue-soft:    #E8F2FF;

  /* Neutrals */
  --bg:           #FAFBFF;
  --bg-elevated:  #FFFFFF;
  --text-primary: #1D1D1F;
  --text-secondary:#6E6E73;
  --text-tertiary:#A1A1A6;
  --divider:      #E5E5EA;

  /* States */
  --success:      #34C759;
  --success-soft: #E8FCEF;
  --error:        #FF3B30;
  --error-soft:   #FFEBEA;

  /* Shadows */
  --shadow-card:  0 4px 24px rgba(0, 80, 200, 0.06);
  --shadow-cta:   0 8px 24px rgba(0, 122, 255, 0.24);
  --shadow-lift:  0 12px 40px rgba(0, 80, 200, 0.12);

  /* Typography */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  --ls-tight:   -0.04em;
  --ls-default: -0.02em;
  --ls-loose:   -0.01em;

  --text-hero:    clamp(36px, 8vw, 64px);
  --text-h1:      clamp(28px, 5vw, 40px);
  --text-h2:      clamp(22px, 4vw, 28px);
  --text-h3:      18px;
  --text-body:    16px;
  --text-caption: 14px;
  --text-tiny:    12px;

  /* Spacing */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px;

  /* Radius */
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-soft:   cubic-bezier(0.4, 0, 0.2, 1);
  --ease-throw:  cubic-bezier(0.18, 0.89, 0.32, 1.28);

  --dur-fast: 180ms;
  --dur-base: 320ms;
  --dur-slow: 500ms;
}

body {
  font-family: var(--font-sans);
  font-feature-settings: "ss03", "ss04";
  letter-spacing: var(--ls-default);
  background: var(--bg);
  color: var(--text-primary);
  font-size: var(--text-body);
  overflow-x: hidden;
}

/* Respect reduced-motion preference but keep brief informational motion alive.
   Only infinite/heavy ambient ornaments are stopped — the quiz throw-in is
   intentional brand storytelling and stays on. */
@media (prefers-reduced-motion: reduce) {
  .hero__sparkle,
  .hero .cta--primary {
    animation: none !important;
  }
}