/* The Pet Care Card: one set of colours for every marketing page.
   The app's own copy is src/index.css; these are the same brand values, named for the marketing
   pages. Change a colour here and every landing page follows: no page defines its own brand hex.
   Contrast is checked once here and asserted by src/landingTokens.test.ts.

   The signature Sunset is a FILL. White on it reads 2.82:1, so anything sitting on Sunset uses ink,
   and Sunset used as TEXT on a light background uses --sunset-ink (5.09:1 on white). */
:root {
  --ink: #1A1626;          /* headings and body */
  --ink-soft: #5b5566;     /* secondary text: 6.2:1 on cream */
  --sunset: #FF6B4A;       /* the signature orange: fills only */
  --sunset-ink: #C63F1B;   /* the same orange, darkened for text on a light background */
  --marigold: #FFC247;
  --sky: #5BC0EB;
  --cream: #FBF6EE;        /* page background */
  --surface: #fff;
  --line: rgba(26, 22, 38, .12);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Hanken Grotesk', system-ui, sans-serif;
  --rad: 20px;
  --shadow: 0 18px 50px rgba(26, 22, 38, .13);
  --ink-deep: #15121d;     /* phone frame */
  --ink-mid: #241f33;      /* screenshot tiles */

  /* The scattered footprints. Read by JS (landing/index.html and the app's src/App.tsx) so the
     palette exists once, not twice. */
  --paw-palette: #FF6B4A, #FFC247, #5BC0EB, #E0402A, #7C5CFC, #2EC4B6, #F45D9C, #8BC34A, #FF9F1C, #3D7DEC, #C77DFF, #00B894;
}