/* Little Pulse · brand tokens
   The one place the app's colors, type, radii and hairline rings are defined.
   Every Little Pulse page (studies and app) links this file first.

   Where these came from (rounds 1 to 7 of the brand studies, 2026-10-11/12):
   the palette is Exa's own (coral, marigold, teal, purple, blue, lilac) with
   pink pushed to bubblegum; white pages and hairlines; type Gabarito (headings)
   and Figtree (everything else). Pink is the hero, but as a mark or a button,
   never a big highlight fill. */

@import url("https://fonts.googleapis.com/css2?family=Gabarito:wght@400..800&family=Figtree:ital,wght@0,400..700;1,400..600&display=swap");

:root {
  /* ink and paper */
  --lp-ink: #1A1410;        /* text, ink buttons */
  --lp-mid: #5A4E44;        /* secondary text, 8.1:1 on white */
  --lp-mut: #6E655C;        /* tertiary text, 5.6:1 on white */
  --lp-paper: #FFFFFF;      /* every page is white, never cream */
  --lp-inset: #F5F5F3;      /* inset fills, hover rows */
  --lp-line: #ECECEA;       /* hairlines */
  --lp-line2: #DEDEDA;      /* stronger hairlines */

  /* the hero */
  --pink: #FF5FAE;          /* bubblegum: the primary button, the mark, the flame. Ink text on it (6.5:1) */
  --pink-deep: #C2187A;     /* pink as TEXT on white, 5.7:1 */
  --pink-t: #FFE8F3;        /* pale pink fill, small areas only */

  /* the family (fills are welcome; colored OUTLINES never).
     Each -deep carries text on white and on its own -t tint at 4.5:1 or better. */
  --coral: #F46B5D;    --coral-deep: #B8392B;    --coral-t: #FDE6E3;
  --marigold: #F5C800; --marigold-deep: #8A6D00; --marigold-t: #FFF6CC;
  --teal: #1EAAA0;     --teal-deep: #11706A;     --teal-t: #DDF3F1;
  --purple: #7B72C8;   --purple-deep: #5A51A8;   --purple-t: #ECEAF8;
  --purple-fill: #7E75C9; /* purple as a big fill under ink text: 2% lighter so ink reads at 4.58:1 (her OK, 2026-10-24) */
  --blue: #4A86BE;     --blue-deep: #2F6699;     --blue-t: #E3EEF8;
  --lilac: #D4A8E0;    --lilac-deep: #8A4F9C;    --lilac-t: #F6EDF9;

  /* type */
  --fd: "Gabarito", "Figtree", sans-serif;   /* headings, the wordmark. 600 to 800 */
  --fu: "Figtree", "Helvetica Neue", sans-serif; /* UI and reading. 400 to 700 */

  /* shape */
  --r-s: 8px; --r-m: 12px; --r-l: 18px; --r-pill: 999px;
  /* no drop shadows, ever (2026-10-14: "never use dropshaddows"); these two
     names stay so old rules keep working, and draw a hairline instead */
  --shadow: 0 0 0 1px var(--lp-line);
  --shadow-up: 0 0 0 1px var(--lp-line2);
  --ring: 0 0 0 1px var(--lp-line);          /* a card's edge is a hairline in grey, never a color */
  /* the one colored ring: keyboard focus. Solid pink-deep, 2px, behind a 1px
     white gap so it reads on fills too: 5.7:1 on white, 5.2:1 on #F5F5F3, 4.7:1 or better on every -t tint
     (2026-10-16 audit; the old translucent pink was about 1.45:1) */
  --focus: 0 0 0 1px #fff, 0 0 0 3px var(--pink-deep);
}