/* At Home Health Co. — design tokens
   Source: "At Home Health Co. — The Brand System", brand guidelines v2, 2026
   v2: warm near-white foundations, clay in place of bright terracotta,
       and Sky introduced as the freedom accent. */

:root {
  /* ---- Color: foundations ---- */
  --ahh-parchment: #FAF7F0;   /* primary background — warm near-white */
  --ahh-cream:     #FFFDF8;   /* glow / cards */
  --ahh-sand:      #F2EBDD;   /* fills / frames */
  --ahh-bark:      #33271F;   /* dark sections */

  /* ---- Color: accents ---- */
  /* Clay — the heartbeat. Warmth, the human hand, the thing worth noticing.
     Browner and quieter than the old terracotta: it sits beside Sky
     instead of shouting over it. Concern, emphasis, the hover glow. */
  --ahh-terracotta:      #A2664B;
  --ahh-terracotta-tint: #C79070;
  --ahh-terracotta-deep: #8A5238;

  /* Sky — freedom, open air, the outdoors you get to keep.
     Primary UI accent: buttons, links, eyebrows, status. Ink, never wallpaper. */
  --ahh-sky-deep: #2F5A73;   /* buttons, prices, emphasis words */
  --ahh-sky:      #3E7391;   /* eyebrows, wordmark, icon strokes */
  --ahh-sky-mid:  #7FA8C0;   /* card top rules, hairlines with intent */
  --ahh-sky-tint: #9FC0D3;   /* sky on bark: emphasis + CTA in dark sections */
  --ahh-sky-pale: #BBD8E8;   /* borders on light ground */
  --ahh-sky-wash: #E7EFF4;   /* status pills, chips — the only fill Sky gets */

  /* Forest — legacy. Superseded by Sky for status and emphasis. */
  --ahh-forest:      #375E43;
  --ahh-forest-mid:  #5E8158;
  --ahh-forest-tint: #8CAE86;

  /* ---- Color: ink & muted text ---- */
  --ahh-ink:      #241F19;
  --ahh-body:     #6A5D4A;
  --ahh-muted:    #8C7E67;
  --ahh-faint:    #B0A084;
  --ahh-hairline: #E9E2D4;

  /* ---- Type ---- */
  --ahh-serif: "Newsreader", Georgia, serif;                    /* display */
  --ahh-sans:  "General Sans", "Inter", -apple-system, sans-serif; /* body, UI, eyebrows. 400/500/600 only */
  --ahh-mono:  "SF Mono", ui-monospace, Menlo, monospace;       /* captions, metadata. uppercase, wide tracking */

  --ahh-eyebrow-tracking: 0.18em;
  --ahh-mono-tracking:    0.10em;

  /* ---- The arch: square, fully-rounded top, gently-rounded base ---- */
  --ahh-arch: 999px 999px 20px 20px;

  /* ---- Radius ---- */
  --ahh-radius-xs:   6px;   /* chips, inputs */
  --ahh-radius-sm:  12px;   /* small cards */
  --ahh-radius-md:  16px;   /* default card */
  --ahh-radius-lg:  24px;   /* panels, sections */
  --ahh-radius-pill: 999px; /* buttons, pills */

  /* ---- Spacing (4px base) ---- */
  --ahh-space-1:   4px;
  --ahh-space-2:   8px;
  --ahh-space-3:  12px;
  --ahh-space-4:  16px;
  --ahh-space-6:  24px;
  --ahh-space-8:  32px;
  --ahh-space-12: 48px;
  --ahh-space-20: 80px;
  --ahh-space-32: 128px;

  /* ---- Elevation: warm shadows only, never grey ---- */
  --ahh-shadow-raised:   0 1px 2px rgba(51, 39, 31, .05);
  --ahh-shadow-card:     0 1px 2px rgba(51, 39, 31, .05), 0 8px 24px -12px rgba(51, 39, 31, .18);
  --ahh-shadow-floating: 0 2px 4px rgba(51, 39, 31, .06), 0 20px 44px -18px rgba(51, 39, 31, .28);

  /* Clay halo — the hover state. A warm ring, not a lift into shadow. */
  --ahh-glow-clay: 0 0 0 1px #D8B69F, 0 0 0 6px rgba(194, 124, 86, .2), 0 20px 44px -18px rgba(162, 102, 75, .45);
}

/*
  RULES THAT ARE NOT TOKENS BUT MATTER MORE THAN TOKENS

  1. Warm near-white, never paper-white and never sepia. The page is warm
     before anything is on it, but it is not a parchment scan.
  2. Two accents, two jobs. Sky is freedom: buttons, links, eyebrows, "steady,"
     "on track." Clay is the human hand: concern, emphasis, the hover glow.
     Never both on the same element.
  3. Sky is ink, not wallpaper. No large blue fields, no blue page backgrounds,
     no blue gradients. Sky appears at text size, in 1–2px rules, in pill fills,
     and on buttons. If a blue area is bigger than a button, it is wrong.
  4. Clay is brown-leaning by design. If it reads mustard or safety-orange,
     it has drifted; pull it back toward #A2664B.
  5. On bark, the accents inverse: Sky Tint carries the emphasis word and the
     CTA, and Clay steps back entirely.
  6. No red sirens. Concern is Clay on a soft tint: "worth a look,"
     not "emergency."
  7. Shadows and glows are tinted warm. A grey shadow on this ground reads clinical.
  8. Big numbers are set in the serif and stated quietly. The number does the
     shouting so the copy doesn't have to.
  9. No exclamation points. No em dashes.
*/