/* Glow & Calm — design tokens ("Pink Glow", the default theme).
   Pink-first: blush backgrounds, glow-pink accents, deep-rose actions, plum-brown text.
   Other themes (css/themes.css) override these same custom properties.
   Contrast pairs are checked in tests/contrast.test.js. */

:root {
  color-scheme: light;

  /* ---- brand palette (build plan §3, Phase 1) ---- */
  --bg: #FFF5F8;             /* blush white */
  --surface: #FFFFFF;
  --surface-2: #FFE4EE;      /* light pink */
  --primary: #F472A8;        /* glow pink — fills, rings, highlights (not text) */
  --primary-strong: #E0457F; /* deep rose — active tab, icons, large text */
  --primary-soft: #FBCFE0;   /* baby pink */
  --accent: #F9A8C9;         /* bubblegum */
  --accent-2: #C9A0DC;       /* soft lilac — secondary charts */
  --gold: #E8B86D;           /* badges / levels */
  --text: #3D2330;           /* deep plum-brown, never pure black */
  --text-muted: #7A5466;     /* plan said #8A6475; darkened so it passes AA on --surface-2 too */
  --success: #7CC6A4;        /* mint ticks */
  --shadow: 0 8px 24px rgba(224, 69, 127, .12);

  /* ---- derived roles ---- */
  /* White on #E0457F is 3.9:1 (fails AA for normal text), so filled buttons use a
     slightly deeper rose that keeps the look but passes (4.9:1). */
  --button-bg: #C8326C;
  --button-bg-hover: #B02A5E;
  --on-button: #FFFFFF;
  --link: #B8336A;           /* rose text on blush, 5.1:1 — use for ANY pink text */
  --on-primary: #FFFFFF;     /* tick marks on --primary-strong (icon, 3:1+) */
  --on-danger: #FFFFFF;
  --tab-active-bg: var(--surface-2);
  /* share cards & the era card (canvas PNGs read these) */
  --card-a: #FFE4EE;
  --card-b: #F9A8C9;
  --card-c: #F472A8;
  --card-ink: #3D2330;
  --surface-3: #FFF0F5;      /* hover / sunk rows */
  --line: #F6D3E1;
  --line-strong: #EDB3CA;
  --focus: #8E3FB0;          /* violet ring, visible on every pink */
  --danger: #B3364A;
  --danger-soft: #FCE3E7;
  --success-ink: #2F7A57;
  --gold-ink: #8A6020;
  --overlay: rgba(61, 35, 48, .38);
  --shadow-soft: 0 2px 10px rgba(224, 69, 127, .08);
  --shadow-lift: 0 14px 40px -10px rgba(224, 69, 127, .28);

  /* celebration colours (confetti, stickers, heat map: light → deep pink) */
  --confetti-1: #F472A8;
  --confetti-2: #F9A8C9;
  --confetti-3: #E0457F;
  --confetti-4: #E8B86D;
  --confetti-5: #FBCFE0;
  --heat-0: #FBEAF1;
  --heat-1: #FBCFE0;
  --heat-2: #F9A8C9;
  --heat-3: #F472A8;
  --heat-4: #E0457F;

  /* ---- type ---- */
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Palatino, Georgia, serif;
  --font-body: 'Lexend', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --fs-xs: .78rem;
  --fs-sm: .875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: clamp(1.65rem, 1.3rem + 1.6vw, 2.2rem);
  --fs-hero: clamp(2.2rem, 1.6rem + 3vw, 3.2rem);
  --lh: 1.55;

  /* ---- space ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --gutter: 16px;
  --tap: 44px;

  /* ---- shape ---- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-card: 24px;            /* cards are 20–28px round */
  --r-lg: 28px;
  --r-pill: 999px;

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-bounce: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 160ms;
  --t-med: 300ms;

  /* ---- layout ---- */
  --tabbar-h: 66px;
  --sidebar-w: 248px;
  --content-max: 720px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 0ms; --t-med: 0ms; }
}