/* ==========================================================================
   TopDog Daycare: design tokens

   BRAND SET. Chosen by the client 2026-08-13 from the ten options on
   presentation/colors.html and presentation/fonts.html:
     Palette  option 01, "Harbour"
     Type     option 01, Fraunces over Inter

   A yellow and blue palette sampled from the building was tried on 2026-08-14 and
   reverted the same day: the client picked Harbour and that pick stands. The yellow
   and blue version survives as a single comparison page, see
   presentation/build-homepage-variant.mjs.

   This is the only file that carries a color, a font or a radius. No other
   stylesheet hardcodes any of them, so a future rebrand is still a one-file
   change.
   ========================================================================== */

:root {

  /* --- Color: Harbour --------------------------------------------------- */
  /* Every pairing below was checked against WCAG AA before being committed.
     The two teals are only 1.66:1 apart, so --c-accent must never sit on
     --c-bg-deep and vice versa. Deep Ocean is for accents on light surfaces. */

  --c-bg:            #ffffff;   /* page background */

  /* Platinum used to be the alternating band. It sits on white at roughly a 3% luminance
     step, so the site's 16 "alternating" sections did not read as alternating at all and
     every page came out as one undifferentiated white slab. The band is now a wash of
     Pale Oak: a step the eye actually registers, and it puts the brand's warm hue on all
     thirteen pages instead of only the home page. Measured 13.58:1 against --c-text.
     Platinum is kept as --c-bg-cool for the few places a cool neutral is genuinely right. */
  --c-bg-alt:        #f2eee4;   /* Oak Wash. Alternating section background */
  --c-bg-cool:       #f0f3f5;   /* Platinum. No longer the default band */
  --c-bg-deep:       #19535f;   /* Dark Teal. Inverted sections and the footer */
  --c-warm:          #d7c9aa;   /* Pale Oak. Full-strength warm feature band */

  --c-text:          #16252b;   /* body copy, a near black carrying a teal cast */
  --c-text-soft:     #4e6169;   /* secondary copy, captions, labels */
  --c-text-invert:   #f0f3f5;   /* copy on --c-bg-deep */
  --c-warm-text:     #2e2a20;   /* headings on --c-warm. 8.73:1 */
  --c-warm-body:     #474235;   /* body copy on --c-warm. 6.11:1, softer on the eye */

  --c-line:          #d5dde1;   /* hairlines, dividers, input borders */
  --c-line-soft:     #e7ecef;

  --c-accent:        #0b7a75;   /* Deep Ocean. Labels, rules, marks. 5.18:1 on white */
  --c-accent-hover:  #0a6b67;
  --c-accent-text:   #ffffff;   /* copy sitting on --c-accent */

  --c-cta:           #7b2d26;   /* Dark Wine. Primary action only, 9.35:1 on white */
  --c-cta-hover:     #6c2821;
  --c-cta-text:      #ffffff;

  --c-focus:         #7b2d26;   /* focus ring. Dark Wine reads on every surface here */

  /* Review stars. Not a brand decision, this is the review-star convention, and
     it matches the Trustindex widget already running on both live sites. */
  --c-star:          #f6bb06;

  /* Gold against Pale Oak measures 1.07:1. Near identical luminance with clashing
     hue is what makes that band vibrate, so on warm surfaces the stars switch to
     Dark Wine at 5.71:1. The convention only helps where it is actually legible. */
  --c-star-on-warm:  #7b2d26;

  /* --- Type: Fraunces over Inter ---------------------------------------- */
  /* Loaded in src/layout.html. The system fallbacks are metric-similar enough
     that a failed font load degrades rather than breaks the layout. */

  --f-heading: 'Fraunces', ui-serif, Georgia, "Times New Roman", serif;
  --f-body:    'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-bold:   700;

  /* Fluid scale. Clamps mean no breakpoint juggling for type. */
  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --t-lg:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --t-xl:   clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
  --t-2xl:  clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem);
  --t-3xl:  clamp(2.5rem, 1.9rem + 2.6vw, 4.25rem);

  --lh-tight: 1.06;   /* display sizes. Big type needs less leading, not more */
  --lh-snug:  1.3;
  --lh-body:  1.7;

  /* Optical tracking. Large type looks loose at 0, small caps look cramped at 0.
     The display value is deliberately tighter than the heading value. */
  --ls-display: -0.03em;
  --ls-tight:   -0.018em;
  --ls-wide:    0.14em;

  /* --- Space ----------------------------------------------------------- */

  --s-1:  0.25rem;
  --s-2:  0.5rem;
  --s-3:  0.75rem;
  --s-4:  1rem;
  --s-5:  1.5rem;
  --s-6:  2rem;
  --s-7:  3rem;
  --s-8:  4rem;
  --s-9:  6rem;
  --s-10: 8rem;

  /* Space is the cheapest luxury signal there is. This is deliberately larger than
     a default template rhythm. */
  --section-y: clamp(4rem, 2.5rem + 6vw, 8rem);   /* vertical section rhythm */
  --wrap:      1180px;                          /* max content width */
  --wrap-wide: 1440px;                          /* max width for .wrap--wide sections */
  --wrap-pad:  clamp(1.125rem, 4vw, 2.5rem);    /* gutter */
  --measure:   68ch;                            /* readable line length */

  /* --- Shape and depth -------------------------------------------------- */

  /* Tight on controls, generous on imagery. The gap between the two is the point:
     a 4px button next to a 22px photo reads considered, one shared 12px does not. */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* Layered rather than single. One shadow at one blur reads like a default; a tight
     contact shadow under a wide ambient one is how a real object sits on paper.
     Opacities stay low on purpose, the depth comes from the stack, not the darkness. */
  --shadow-xs:
    0 1px 1px rgba(16, 20, 24, 0.04),
    0 2px 4px rgba(16, 20, 24, 0.03);
  --shadow-sm:
    0 1px 1px rgba(16, 20, 24, 0.04),
    0 3px 8px rgba(16, 20, 24, 0.04),
    0 8px 16px rgba(16, 20, 24, 0.03);
  --shadow-md:
    0 1px 2px rgba(16, 20, 24, 0.05),
    0 6px 14px rgba(16, 20, 24, 0.05),
    0 16px 32px rgba(16, 20, 24, 0.05);
  --shadow-lg:
    0 2px 4px rgba(16, 20, 24, 0.05),
    0 12px 28px rgba(16, 20, 24, 0.06),
    0 32px 64px rgba(16, 20, 24, 0.07);

  /* A hairline drawn as a shadow rather than a border, so it can sit on top of an
     image without taking up layout space. Mats a photo the way a frame does. */
  --ring-inset: inset 0 0 0 1px rgba(16, 20, 24, 0.08);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur:  180ms;
}