/* Lazy Hippo — design tokens
   Single source of truth for colour, type and spacing.
   Change a value here and it changes everywhere.
   Sampled from assets/logo_and_text.jpeg — refine together in Step 6. */

:root {

  /* --- Colour ------------------------------------------------------- */
  --c-paper:      #F7F4EE;   /* warm off-white, straight from the logo bg */
  --c-paper-deep: #EFEAE1;   /* section shading */
  --c-ink:        #1B211F;   /* the single-line drawing's near-black     */
  --c-ink-soft:   #5A625F;   /* secondary text                          */
  --c-ink-faint:  #9AA09D;   /* captions, disabled                      */
  --c-line:       #DDD6CA;   /* hairline borders                        */

  --c-blush:      #E7A6AC;   /* the Pink product variant                */
  --c-blush-deep: #C97E86;   /* hover / pressed                         */
  --c-moss:       #6E8B72;   /* the Green resistance band; used sparingly */

  --c-ok:         #3F7D58;
  --c-warn:       #B4732C;

  /* --- Type --------------------------------------------------------- */
  --f-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
            "Helvetica Neue", Arial, sans-serif;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-lg:   1.25rem;
  --t-xl:   1.625rem;
  --t-2xl:  2.25rem;
  --t-3xl:  clamp(2rem, 6vw, 3.5rem);

  --lh-tight: 1.15;
  --lh-body:  1.65;

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

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

  /* --- Shape & motion ----------------------------------------------- */
  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-pill: 999px;

  --shadow-soft: 0 2px 12px rgba(27, 33, 31, 0.06);
  --shadow-lift: 0 8px 28px rgba(27, 33, 31, 0.10);

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

  /* --- Layout ------------------------------------------------------- */
  --wrap: 1120px;
  --wrap-narrow: 640px;
}

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