/* ============================================================================
   Drinkwell design tokens
   ----------------------------------------------------------------------------
   The entire visual language of www.drinkwell.com is defined here. Change a
   value in this file and it propagates everywhere. Nothing in site.css should
   contain a raw hex colour, a raw font size, or a raw radius -- if you find
   yourself typing one, add a token instead.

   The scale is modelled on apple.com: near-black on near-white, one accent,
   tight negative tracking on display type, generous vertical air, hairline
   rules instead of borders, no shadows.
   ========================================================================= */

:root {
  /* --- Ink ---------------------------------------------------------------
     Four steps only. More than four greys is how a page starts looking
     machine-generated. */
  --ink:            #1d1d1f;   /* primary text, near-black not pure black  16.8:1 */
  --ink-2:          #6e6e73;   /* secondary text, body copy on light        5.1:1 */
  /* Apple's own caption grey is #86868b, which measures 3.6:1 on white and
     fails WCAG AA. It carries every eyebrow, caption, figure label and spec
     note here -- all at 13px -- so it is two steps darker than Apple's. The
     difference is invisible side by side and it clears AA at 4.6:1. Do not
     lighten this back without re-running the contrast check. */
  --ink-3:          #74747a;   /* captions, labels, disabled                4.6:1 */
  --ink-inverse:    #f5f5f7;   /* text on dark sections */
  --ink-inverse-2:  #a1a1a6;   /* secondary text on dark sections */

  /* --- Ground ------------------------------------------------------------ */
  --bg:             #ffffff;
  --bg-alt:         #f5f5f7;   /* the Apple grey; section alternation + cards */
  --bg-dark:        #101012;   /* full-black sections */
  --bg-dark-alt:    #1d1d1f;   /* cards inside dark sections */

  /* --- Accent ------------------------------------------------------------
     Drinkwell blue, in two roles. --accent is the only one allowed to carry
     text or a filled button: it clears 4.5:1 on white and holds white text at
     5.2:1. --accent-bright is the brand hue and is decorative only -- rules,
     underlines, focus rings. Never set text in it. */
  --accent:         #0b6fa8;
  --accent-hover:   #095a89;
  --accent-bright:  #1697dc;

  /* --- Horse · Harness · Habit · Hay --------------------------------------
     The spine of the homepage, and the same framing as the impact report at
     impact.drinkwell.com -- horse = the media chemistry, harness = the
     delivery format, habit = the operating partner who keeps it running, hay =
     which of the OECD 3Ts pays for the running. Carried over from that report
     so the two properties read as one company.
     --c-habit is darkened from the report's #0e8a72, which measures 4.3:1 on
     white and fails AA; this clears it at 5.1:1. Each of the four carries only
     an eyebrow, so they never sit next to each other and do not need to be
     distinguishable at a glance -- only legible. All four clear AA on white. */
  --c-horse:        #1d6fa8;   /* 5.4:1 */
  --c-harness:      #a04f18;   /* 5.8:1 */
  --c-habit:        #0d7d68;   /* 5.1:1 */
  --c-hay:          #8a6a00;   /* 5.1:1 */

  /* --- Lines -------------------------------------------------------------
     Hairlines, never borders. A 1px rgba line reads as a fold in the paper;
     a solid #ddd border reads as a box drawn around something. */
  --hairline:       rgba(0, 0, 0, .12);
  --hairline-soft:  rgba(0, 0, 0, .06);
  --hairline-dark:  rgba(255, 255, 255, .16);

  /* --- Type --------------------------------------------------------------
     SF Pro when we are on Apple hardware, which is where the aesthetic reads
     as intended. The fallbacks are chosen to hold the same tracking. */
  --font: "SF Pro Display", "SF Pro Text", -apple-system, BlinkMacSystemFont,
          "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  /* Fluid display scale. The clamp middles are vw-based so the hero fills the
     viewport at every width rather than stepping at breakpoints. */
  --t-display:  clamp(2.75rem, 7.5vw, 5.5rem);   /*  44 -> 88px  hero only */
  --t-headline: clamp(2rem,   4.5vw, 3.25rem);   /*  32 -> 52px  section heads */
  --t-title:    clamp(1.375rem, 2.2vw, 1.75rem); /*  22 -> 28px  card titles */
  --t-lead:     clamp(1.125rem, 1.6vw, 1.3125rem);/* 18 -> 21px  standfirst */
  --t-body:     1.0625rem;                        /* 17px        Apple body */
  --t-small:    0.9375rem;                        /* 15px */
  --t-caption:  0.8125rem;                        /* 13px        labels, legal */

  --w-regular:  400;
  --w-medium:   500;
  --w-semi:     600;

  /* Negative tracking is most of what makes large type look designed rather
     than defaulted. It must scale down as size drops or small text falls apart. */
  --track-display:  -0.028em;
  --track-headline: -0.021em;
  --track-title:    -0.014em;
  --track-body:     -0.008em;
  --track-caps:      0.075em;   /* the only positive tracking, for small caps */

  --lh-display: 1.05;
  --lh-head:    1.09;
  --lh-title:   1.2;
  --lh-body:    1.47;
  --lh-lead:    1.42;

  /* --- Space -------------------------------------------------------------
     Section rhythm is the single biggest lever on whether a page feels
     expensive. These are deliberately larger than feels comfortable. */
  --gutter:       clamp(1.25rem, 4vw, 2.5rem);
  --section-y:    clamp(5rem, 11vw, 10rem);     /*  80 -> 160px */
  --section-y-sm: clamp(3.5rem, 7vw, 6rem);     /*  56 ->  96px */
  --stack-1: .5rem;
  --stack-2: 1rem;
  --stack-3: 1.5rem;
  --stack-4: 2.5rem;
  --stack-5: 4rem;

  /* --- Measure ----------------------------------------------------------- */
  --w-text:  42rem;    /* 672px  -- reading column, ~70 characters */
  --w-body:  61.25rem; /* 980px  -- Apple's content width */
  --w-wide:  87.5rem;  /* 1400px -- full-bleed media, nav */

  /* --- Shape -------------------------------------------------------------
     Apple's large radius on media and cards, pill on buttons. Nothing else. */
  --r-card:   18px;
  --r-media:  24px;
  --r-pill:   980px;
  --r-input:  12px;

  /* --- Motion ------------------------------------------------------------ */
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --dur-fast:  .18s;
  --dur:       .4s;
  --dur-slow:  .9s;

  /* --- Chrome ------------------------------------------------------------ */
  --nav-h:     48px;
  --nav-blur:  saturate(180%) blur(20px);
  --nav-bg:    rgba(255, 255, 255, .72);
}

/* Dark mode is a deliberate non-goal for the marketing site: Apple's own
   product pages are light and use black *sections* for contrast rather than a
   global dark theme. We honour the OS setting only for the address bar. */
:root { color-scheme: light; }