/* Lazy Hippo — design tokens
   Single source of truth for colour, type and spacing.
   Change a value here and it changes everywhere.

   Follows the "Breathe" design system (claude.ai/artifact/4fFNqSrMgeKM1BxK2d3V6K),
   adopted 26 Sep 2026: warm off-white space, one muted sage, a light serif
   and a quiet sans. Token names match the system's so the two stay easy to
   compare. Contrast ratios are against --c-surface unless noted. */

:root {

  /* --- Surfaces ----------------------------------------------------- */
  --c-surface:        #FAF5F2;   /* page background                         */
  --c-surface-raised: #FCF8F5;   /* alternating full-width bands — sections
                                    separate by tone, never by rules/cards  */
  --c-sage-mist:      #E7E4DB;   /* behind product photos and imagery       */
  --c-sage-soft:      #D9D7CB;
  --c-paper-deep:     #F2EDE2;   /* pre-Breathe warm shading, kept by request
                                    for the challenge card and product tiles */   /* small accent fills, badges. Ink text.   */
  --c-line:           #DDDBD6;   /* outline button border, hairlines. 1.3x  */

  /* --- Text --------------------------------------------------------- */
  --c-ink:        #1B1F1B;   /* 15x  — headlines, nav, prices              */
  --c-ink-soft:   #41403E;   /* 9.8x — card titles, secondary headings     */
  --c-ink-muted:  #6E6B67;   /* 4.9x — body copy, eyebrows, captions       */
  --c-ink-faint:  #A29E98;   /* 2.4x — DECORATIVE ONLY. Never body text.   */

  /* --- Brand -------------------------------------------------------
     Sage is the only saturated colour. It belongs to the primary action
     and the focus ring — one filled button per view. */
  --c-sage:       #6D7968;   /* primary fill, focus ring. 4.2x             */
  --c-sage-deep:  #5F6B5A;   /* primary hover / pressed                    */
  --c-on-sage:    #FFFFFF;   /* label on sage. 4.6x                        */
  --c-veil:       rgba(255, 255, 255, 0.5);  /* cursor fill over pressables */

  /* --- Icon discs ---------------------------------------------------
     Tinted circles behind icons or step numbers, always in this order:
     sage, blush, lilac, mist. Each pairs with its own icon ink. */
  --c-tint-sage:  #E8E4DC;  --c-icon-sage:  #7C7C72;
  --c-tint-blush: #FBE8E0;  --c-icon-clay:  #987D74;
  --c-tint-lilac: #EBE5EB;  --c-icon-plum:  #6A636D;
  --c-tint-mist:  #E5E9EC;  --c-icon-slate: #636C6F;

  /* --- Product swatches ---------------------------------------------
     TRUE sampled product colours. These represent physical goods, so they
     are never adjusted — a pink mat must look pink.
     Use only for variant chips, never as a text or button background. */
  --sw-black:     #2D2D2C;
  --sw-pink:      #EFD9DB;
  --sw-green:     #C2D5B9;
  --sw-cork:      #8D6F52;

  /* --- Status ------------------------------------------------------- */
  --c-ok:         #3F7D58;
  --c-warn:       #B4732C;
  --c-error:      #A33A3A;

  /* --- Type --------------------------------------------------------- */
  /* Headlines in the light serif, never bold. Everything else in the sans. */
  --f-serif: "Newsreader", "Cormorant Garamond", Georgia, serif;
  --f-sans:  "DM Sans", "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;   /* 13px */
  --t-sm:   0.9375rem;   /* 15px — body, label */
  --t-base: 1rem;        /* 16px */
  --t-lg:   1.125rem;    /* 18px — body-lg, intro paragraphs */
  --t-xl:   1.25rem;     /* 20px — title, display-quote */
  --t-2xl:  clamp(2rem, 4.5vw, 2.75rem);      /* 44px — display-lg */
  --t-3xl:  clamp(2.625rem, 7vw, 4.75rem);    /* 76px — display-xl, hero only */

  --lh-tight: 1.07;
  --lh-body:  1.6;

  --w-light:  300;
  --w-medium: 500;

  /* --- Space (4px scale) -------------------------------------------- */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-24: 6rem;

  /* --- Shape, depth & motion ---------------------------------------- */
  --r-sm: 8px;       /* tooltips, menu rows                          */
  --r-md: 16px;      /* product tiles, small panels                  */
  --r-xl: 32px;      /* photography, large panels                    */
  --r-pill: 999px;   /* every button, chip and input                 */

  /* The only shadow. Floating things only; cards and buttons stay flat. */
  --shadow-soft: 0 24px 48px rgba(27, 31, 27, 0.08);

  --control-md: 48px;
  --control-lg: 56px;
  --icon-disc:  64px;

  --ease: ease;
  --dur: 200ms;

  /* --- Layout ------------------------------------------------------- */
  /* Header height on desktop, where it comes from 15px padding either side
     of a 34px language toggle. Desktop is NOT set from this value — it is
     still padding-driven and untouched. Phones use this number to match it. */
  --head-h: 64px;

  --wrap: 1240px;
  --gutter: var(--s-16);   /* page side margin; narrows on smaller screens */

  /* One measure for every block of body text on the site. Set it to a
     length (e.g. 78ch) to pull text in; leave it as none and text spans
     the full page width. Every page uses this — nothing sets its own. */
  --measure: none;
}

@media (max-width: 1024px) { :root { --gutter: var(--s-8); } }
@media (max-width: 620px)  { :root { --gutter: var(--s-4); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}