/* EVE Companion — Design Tokens
 *
 * Style: Custom blend of "Modern Dark (Cinema Mobile)" structure with a
 *        romantic palette swap (deep midnight blues + rose gold).
 * Typography: "Classic Elegant" pairing (Playfair Display + Inter).
 *
 * Generated by /ui-ux-pro-max:ui-ux-pro-max for Task 2 of the build plan.
 * Companion summary: docs/design-decisions.md
 */

:root {
  /* ---------- Backgrounds ---------- */
  /* Never pure #000 — kills OLED contrast and feels clinical, not intimate. */
  --bg-deeper:    #050813;            /* vignette edges, screen 4 placeholder */
  --bg-primary:   #0a0e1f;            /* main page background */
  --bg-elevated:  #131b30;            /* raised cards, form surfaces */
  --bg-overlay:   rgba(10, 14, 31, 0.85); /* image gradient overlays on cards */

  /* ---------- Foreground (text + iconography) ---------- */
  /* Warm off-white instead of #fff — romantic, easier on the eyes in dark. */
  --text-primary: #ede4d3;
  --text-muted:   #8a8497;            /* secondary copy, taglines, hints */
  --text-faint:   #5a5566;            /* tertiary / disabled */

  /* ---------- Accent (rose gold) ---------- */
  --accent:        #d4a574;
  --accent-hover:  #e6b787;
  --accent-soft:   rgba(212, 165, 116, 0.18);
  --accent-tint:   rgba(212, 165, 116, 0.08);

  /* ---------- Semantic / state ---------- */
  --error:         #d97a7a;             /* form validation errors, destructive button danger ring */
  --error-soft:    rgba(217, 122, 122, 0.15); /* error toast/notice background */
  --success:       #8aa78a;             /* form-save confirmation, "saved" badge (reserved for Phase 2) */

  /* ---------- Borders & dividers ---------- */
  /* Hairline width, rose-gold tinted — almost invisible but registers. */
  --border:        rgba(255, 255, 255, 0.08);
  --border-accent: rgba(212, 165, 116, 0.20);

  /* ---------- Shadows ---------- */
  --shadow-card:   0 24px 60px rgba(0, 0, 0, 0.45);
  --shadow-glow:   0 0 60px rgba(212, 165, 116, 0.18);
  --shadow-press:  0 8px 24px rgba(0, 0, 0, 0.35);

  /* ---------- Radii ---------- */
  --radius-sm:     0.5rem;            /* chips, small buttons */
  --radius-md:     0.75rem;           /* form inputs */
  --radius-lg:     1rem;              /* primary CTA */
  --radius-xl:     1.5rem;            /* gender cards, avatar block */
  --radius-pill:   9999px;            /* style chips, badges */

  /* ---------- Typography ---------- */
  --font-heading: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --font-body:    "Inter", system-ui, -apple-system, sans-serif;

  /* Type scale (mobile-first, scales up via media queries in styles.css) */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.5rem;    /* 24px */
  --text-2xl:  2rem;      /* 32px */
  --text-3xl:  2.5rem;    /* 40px */
  --text-4xl:  3.25rem;   /* 52px (desktop hero) */

  /* ---------- Motion ---------- */
  /* Cinematic ease — long tail, no overshoot. From "Modern Dark Cinema" style. */
  --easing-cinematic: cubic-bezier(0.16, 1, 0.3, 1);
  --easing-soft:      cubic-bezier(0.4, 0, 0.2, 1);

  --duration-fast:    180ms;          /* hover, focus rings */
  --duration-medium:  320ms;          /* fades, color shifts */
  --duration-slow:    600ms;          /* screen transitions, reveals */
  --duration-reveal:  900ms;          /* avatar / partner reveal on Screen 3 */

  /* ---------- Spacing scale (8pt rhythm) ---------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
}

/* Reduced-motion overrides — respects OS-level accessibility preference. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0ms;
    --duration-medium: 0ms;
    --duration-slow:   0ms;
    --duration-reveal: 0ms;
  }
}