/* ============================================================
   Heart First — Design Tokens
   Source of truth: designer export (Design System/Light.tokens.json +
   Dark.tokens.json — Figma "Heart First App"). Values are EXACT.
   Font: Outfit (Google Fonts).

   Architecture: ONE set of semantic variables, redefined per theme.
   Light = :root (default). Dark = [data-theme="dark"].
   NOTE: the accent coral DIFFERS per theme (light #FF4031 / dark #FF5A4D).
   ============================================================ */

:root {
  /* ---------- LIGHT THEME (default) ---------- */
  /* Accent / interactive */
  --accent: #ff4031;            /* Primary Accent */
  --accent-hover: #e8362a;      /* Primary Accent Hover */
  --accent-press: #f23021;      /* Button-Primary-BG-Hover */
  --accent-soft: #ff6e5e;
  --accent-contrast: #fffdfe;   /* Primary Foreground */

  /* Backgrounds & surfaces */
  --bg: #fffdfe;                /* Background */
  --bg-elevated: #ffffff;       /* floating cards / menus */
  --surface: #f6f4f4;           /* Surface(Card) — cards, nav, chips */
  --surface-2: #ece9e9;         /* Surface Elevated */
  --surface-hover: #f1efef;     /* Surface(Card)-Hover */
  --surface-inset: #ffffff;     /* inset areas (grids, inputs) */

  /* Text & borders */
  --text: #2d2a2e;              /* Text Primary */
  --text-strong: #2d2a2e;       /* headings (design uses Text Primary) */
  --text-muted: #6b6369;        /* Text Secondary */
  --text-faint: #9e949a;        /* Text Muted */
  --border: #ede7ea;            /* Border_Divider */
  --border-strong: #d9d2d6;     /* Input Border */

  /* Secondary / ghost button */
  --btn-secondary-bg: #eaeaea;
  --btn-secondary-bg-hover: #dadada;
  --btn-secondary-text: #2d2a2e;

  /* Semantic status */
  --info: #3078c6;
  --success: #2d9e6b;
  --warning: #d4890b;
  --error: #d93025;

  /* Shadows */
  --shadow-color: 300 8% 18%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.06);
  --shadow-md: 0 8px 24px -8px hsl(var(--shadow-color) / 0.14);
  --shadow-lg: 0 24px 60px -18px hsl(var(--shadow-color) / 0.20);
  --divider-glow: linear-gradient(90deg, transparent, var(--accent) 50%, transparent);

  /* ---------- Spacing scale (Figma Spacing/Units, 4px base) ---------- */
  --u-1: 4px;   --u-2: 8px;   --u-3: 12px;  --u-4: 16px;  --u-5: 20px;
  --u-6: 24px;  --u-7: 28px;  --u-8: 32px;  --u-10: 40px; --u-12: 48px;
  --u-14: 56px; --u-15: 60px; --u-16: 64px; --u-20: 80px; --u-24: 96px;
  --u-32: 128px; --u-40: 160px;

  /* ---------- Radii ---------- */
  --radius-xs: 8px; --radius-sm: 10px; --radius: 12px; --radius-md: 16px;
  --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;

  /* ---------- Typography (Outfit; type scale 1.125, base 16) ---------- */
  --font-sans: "Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-eyebrow: 0.75rem;                                /* 12px — extra-small(Labels) */
  --fs-sm: 0.875rem;                                    /* 14px — small */
  --fs-body: 1rem;                                      /* 16px — body */
  --fs-body-lg: 1.0625rem;
  --fs-h3: clamp(1.25rem, 0.95rem + 1vw, 1.5rem);       /* 20→24 */
  --fs-h2: clamp(1.75rem, 1.1rem + 2.4vw, 2.75rem);     /* 28→44 */
  --fs-h1: clamp(2.5rem, 1.2rem + 4.6vw, 4.25rem);      /* 40→68 */
  --fs-stat: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem);
  --lh-tight: 1.1;
  --lh-heading: 1.25;   /* Figma: headings font-size*1.25 */
  --lh-body: 1.5;
  --lh-relaxed: 1.35;   /* Figma: body font-size*1.35 */
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  /* ---------- Layout ---------- */
  --container: 1320px;
  --container-narrow: 1080px;
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 8vw, 128px);
  --nav-h: 80px;

  /* ---------- Motion ---------- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 200ms; --dur-slow: 360ms;

  color-scheme: light;
}

/* =================== DARK THEME =================== */
[data-theme="dark"] {
  --accent: #ff5a4d;            /* Primary Accent (dark) */
  --accent-hover: #ff6e63;      /* Primary Accent Hover (dark) */
  --accent-press: #f4584c;
  --accent-soft: #ff7a6e;
  --accent-contrast: #ffffff;

  --bg: #1a1a1e;                /* Background */
  --bg-elevated: #242428;       /* Surface(Card) */
  --surface: #242428;           /* Surface(Card) */
  --surface-2: #2e2e33;         /* Surface Elevated */
  --surface-hover: #2c2c31;     /* Surface(Card)-Hover */
  --surface-inset: #1a1a1e;

  --text: #f5f0f1;              /* Text Primary */
  --text-strong: #ffffff;
  --text-muted: #a39ba0;        /* Text Secondary */
  --text-faint: #706a6e;        /* Text Muted */
  --border: #3a3a3f;            /* Border_Divider */
  --border-strong: #4a4a50;     /* Input Border */

  --btn-secondary-bg: #3a3a3f;
  --btn-secondary-bg-hover: #4a4a50;
  --btn-secondary-text: #f5f0f1;

  --info: #5b9fe6;
  --success: #3db87e;
  --warning: #e9a025;
  --error: #f04438;

  --shadow-color: 240 30% 2%;
  --shadow-sm: 0 1px 2px hsl(var(--shadow-color) / 0.4);
  --shadow-md: 0 10px 30px -10px hsl(var(--shadow-color) / 0.6);
  --shadow-lg: 0 28px 70px -20px hsl(var(--shadow-color) / 0.7);

  color-scheme: dark;
}

/* Respect OS preference on first visit (before JS sets an explicit choice) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --accent: #ff5a4d; --accent-hover: #ff6e63; --accent-press: #f4584c;
    --accent-soft: #ff7a6e; --accent-contrast: #ffffff;
    --bg: #1a1a1e; --bg-elevated: #242428; --surface: #242428;
    --surface-2: #2e2e33; --surface-hover: #2c2c31; --surface-inset: #1a1a1e;
    --text: #f5f0f1; --text-strong: #ffffff; --text-muted: #a39ba0;
    --text-faint: #706a6e; --border: #3a3a3f; --border-strong: #4a4a50;
    --btn-secondary-bg: #3a3a3f; --btn-secondary-bg-hover: #4a4a50; --btn-secondary-text: #f5f0f1;
    --info: #5b9fe6; --success: #3db87e; --warning: #e9a025; --error: #f04438;
    --shadow-color: 240 30% 2%;
    color-scheme: dark;
  }
}