/* ==========================================================================
   Barend & Erin's Baby Pool: design tokens
   Every colour, size and radius used in the designs. app.css only uses these.
   Contrast figures are against --bg / --surface unless stated.
   ========================================================================== */

:root {
  /* --- Neutrals --------------------------------------------------------- */
  --bg:              #FFF9F2;  /* page background (warm off-white) */
  --surface:         #FFFFFF;  /* cards */
  --surface-sunk:    #F6F1EA;  /* chips, inner tiles, inactive buttons */
  --line:            #EFE4D6;  /* card borders */
  --line-strong:     #D9CBB9;  /* input borders, dashed placeholders */
  --line-soft:       #F0E8DE;  /* row dividers, empty progress track */
  --ink:             #2B2140;  /* body text, dark surfaces (~14:1) */
  --ink-muted:       #6E6380;  /* secondary text (~5.5:1) */
  --ink-on-dark:     #FFFFFF;
  --ink-on-dark-muted: #E3DAFA;

  /* --- Brand ------------------------------------------------------------ */
  --grape:           #5B3FB0;  /* primary actions, links, selection (white text ~7.5:1) */
  --grape-hover:     #3F2A85;
  --grape-soft:      #EEE8FB;  /* "you" highlight, selected letter tile */
  --grape-track:     #7B62C6;  /* progress track on grape */
  --sun:             #FFC94D;  /* logo, winner, accents (use with --ink text) */
  --sun-soft:        #FFF2CC;  /* hero panels, notes */
  --sun-softer:      #FFFBEF;  /* bonus field */
  --sun-ink:         #7A4B00;  /* eyebrow text on sun-soft (~7:1) */
  --sun-ink-2:       #5A4A1A;
  --tangerine:       #FF9F43;  /* due-date marker, confetti */

  /* --- Boy / girl (always paired with a text label, never colour alone) - */
  --boy:             #2563C9;  /* fill, white text */
  --boy-soft:        #E3EDFC;
  --boy-ink:         #1D4E9E;
  --boy-line:        #C9D9F4;
  --girl:            #F28AA5;  /* fill, dark text --girl-ink-deep */
  --girl-strong:     #C93A64;
  --girl-soft:       #FCE4EC;
  --girl-ink:        #8A1F42;
  --girl-ink-deep:   #4A0F22;
  --girl-line:       #F5CBD7;

  /* --- Status ----------------------------------------------------------- */
  --good:            #1F7A55;  /* points earned, saved, revealed */
  --good-soft:       #E1F3EA;
  --warn:            #B54708;  /* Late Edit, destructive confirm */
  --warn-ink:        #8A3505;
  --warn-soft:       #FEF0E6;
  --warn-line:       #E8B79A;
  --danger-text:     #A33A12;  /* "Delete my card", "Remove" */

  /* --- Medals ----------------------------------------------------------- */
  --gold:            #FFC94D;
  --silver:          #E6E1EA;
  --bronze:          #F3C9A4;

  /* --- Paused state: deliberately neutral, no brand colour --------------- */
  --calm-bg:         #F5F4F2;
  --calm-tile:       #E7E5E1;
  --calm-ink:        #2E2E2E;
  --calm-ink-2:      #4A4A4A;
  --calm-muted:      #5E5E5E;
  --void-soft:       #EDEBE8;

  /* --- Type ------------------------------------------------------------- */
  --font-display: "Fredoka", "Nunito", system-ui, sans-serif;  /* 500/600/700 */
  --font-body:    "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif; /* 400/600/700/800 */
  --fs-xs:   12px;
  --fs-sm:   14px;   /* helper text, labels */
  --fs-md:   15px;   /* secondary text, chips, nav */
  --fs-base: 17px;   /* body: deliberately large for grandparents */
  --fs-lg:   18px;
  --fs-h3:   22px;   /* card titles (display font) */
  --fs-h2:   26px;   /* section titles */
  --fs-h1:   30px;   /* page titles; hero 34px; laptop 40px */
  --fs-hero: 34px;
  --fs-num:  32px;   /* countdown / stat numbers */
  --lh-body: 1.5;
  --lh-tight: 1.1;

  /* --- Space & shape ---------------------------------------------------- */
  --gutter:   16px;  /* phone side padding */
  --gap-xs:   6px;
  --gap-sm:   8px;
  --gap:      12px;
  --gap-md:   16px;
  --gap-lg:   24px;
  --radius-sm: 10px;
  --radius:    14px; /* inputs, buttons */
  --radius-md: 16px;
  --radius-lg: 20px; /* cards */
  --radius-xl: 24px; /* hero panels */
  --radius-pill: 999px;
  --tap: 44px;       /* minimum touch target */
  --tap-lg: 52px;    /* primary buttons */
  --container: 720px;      /* phone-first single column */
  --container-wide: 1180px; /* laptop layout */
  --focus: 3px solid var(--grape);
}