/* =====================================================================
   BRAND TOKENS - NannyRoster.
   The only file on this page with colors and fonts in it. Every rule in
   app.css reads these variables and never a literal color.

   Values are not invented here. They are the shipping palette recorded in
   the project's brand folder at brand/colors-fonts/ (a repo relative path:
   this file is world readable once uploaded, so it must not publish a home
   folder path), which in turn was read out of the app's own :root. The
   canonical color and font definitions live there. Harbor is the primary, Berry
   is a spice and not a base, and --alert (#B3261E) is reserved for safety
   and allergy warnings only, so it appears nowhere on this page.
   ===================================================================== */

:root {
  /* ---- core palette ---- */
  --ink:        #16232B;   /* near black: headlines, phone chrome, footer */
  --ink-2:      #1E3945;   /* phone hardware body, between ink and harbor */
  --ink-3:      #3C6274;   /* lifted edge highlight on the phone hardware */
  --accent:     #1E4D6B;   /* Harbor. CTAs, beam, active states, links */
  --accent-lt:  #4E90BC;   /* Harbor on dark, used for the spark and glow */
  --accent-dk:  #143A52;   /* Harbor deep. Pressed states and borders */
  /* Berry is the wordmark accent and the eyebrow label color. It is NOT
     the CTA accent, which is the one place this brand does not fit the
     template's single-accent assumption. */
  --berry:      #A34A6B;

  /* ---- surfaces ---- */
  /* Warm cream. This is the established page tone, not a new color.
     Changing it shifts every surface on the page. Linen (#FAF8F5) is one
     step deeper and now only appears where a surface has to read as
     slightly recessed. */
  --bg:         #FCFAF7;   /* Cream. The warm page background */
  --bg-2:       #F4F1EB;   /* warm-2, the alternating section band */
  /* --bg-3 is a derived third surface, not one of the four named brand
     grays, so it is free to move. It carries the phone stat tiles and the
     resting icon chips, both of which hold small muted type. A deeper warm
     tone (#EAE5DC) put Slate at 4.41:1, under the AA floor, so it is held
     one step lighter. Contrast is the gate; the warmer swatch was the
     better looking one. */
  --bg-3:       #F0EBE3;   /* chip rest state and tile fill */
  --card:       #FFFFFF;   /* white card face, lifted off the cream page */
  --line:       #E4E0DA;   /* hairline around cards */

  /* ---- text ----
     --text-muted carries small type (the perks line, meta, captions), so
     it is held at Slate rather than dropped lighter. A paler gray looked
     calmer and measured 3.6:1 on Linen, under the 4.5:1 floor. */
  --text:       #16232B;
  --text-2:     #5A6B75;   /* Slate. Body copy */
  --text-muted: #5A6B75;   /* Slate. Perks, meta, captions */
  --on-accent:  #FFFFFF;   /* white on Harbor */
  --on-ink:     #FFFFFF;

  /* ---- semantic tones inside the phone screens ----
     Meadow for confirmation, brand amber for caution. Not the red: red is
     the allergy color in the product and it does not get borrowed here. */
  /* Meadow, one step deeper than the brand's #3E7A6B. Measured against
     real composited pixels, brand Meadow came in at 4.43:1 on the row
     band and 4.21:1 on the tile fill, both under the AA floor, and it
     carries the confirmation text in every phone screen. #3A7263 clears
     4.5:1 on every surface it touches and reads as the same green.
     Deepening the ink is what let --ok-bg stay exactly as the brand
     file has it. Known limitation: --ok is therefore not the same value as
     the brand file's published Meadow, and the two will not match if they
     are ever compared directly. */
  --ok:         #3A7263;   /* confirmation only */
  --ok-bg:      #E8F1EE;   /* brand value, 4.84:1 with the deeper Meadow */
  --warn:       #8A6212;
  --warn-bg:    #F7EFDD;

  /* ---- type ----
     The whole brand is set in the system stack: zero network requests,
     zero layout shift, and no external origin, which the product's own
     no-tracker rule requires. Headline weight is 700, the weight the
     brand uses everywhere else. */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: var(--font);
  --w-bold: 700;

  /* ---- geometry ---- */
  --radius:     14px;
  --radius-sm:  10px;
  --shadow:     0 1px 2px rgba(22,35,43,.06), 0 6px 18px rgba(22,35,43,.07);
  --shadow-lg:  0 24px 60px -22px rgba(22,35,43,.30), 0 8px 22px rgba(22,35,43,.08);
  --maxw:       1200px;

  /* ---- the phone ----
     --pw is the ONLY phone dimension. Do not add a second one and do not
     hand tune a radius: app.css derives every other measurement from this
     and the fold gate asserts the height ratio. */
  --pw: 268px;
}