/* ============================================================
   PuraUse — Design Tokens
   Pure Use. No Hype.
   Palette per Purause_Brand_Guidelines: five pastel product-line
   colours, each paired with a deep ink of the same hue.
   ============================================================ */

:root {
  /* ---- Ground & ink ---- */
  --paper:        #FBFAF7;
  --paper-warm:   #F6F4EF;
  --ink:          #20302B;
  --ink-80:       rgba(32, 48, 43, .80);
  --ink-70:       rgba(32, 48, 43, .70);
  --ink-55:       rgba(32, 48, 43, .55);
  --ink-40:       rgba(32, 48, 43, .40);
  --line:         rgba(32, 48, 43, .14);
  --line-strong:  rgba(32, 48, 43, .28);

  /* ---- Brand deep (band / accent) ---- */
  --teal:         #0F7367;   /* 5.5:1 on paper text — AA body */
  --teal-bright:  #128577;   /* official aqua deep, decorative */

  /* ---- Product line: SAGE — Face ---- */
  --sage:        #C3E8D4;
  --sage-wash:   #E2F2E7;
  --sage-deep:   #1F7A56;   /* official — decorative / large type */
  --sage-text:   #15563C;   /* 6.5:1 on --sage — AA body */

  /* ---- Product line: BUTTER — Body ---- */
  --butter:      #F6E1A6;
  --butter-wash: #F9EFD3;
  --butter-deep: #B8860B;
  --butter-text: #7A5806;   /* 5.0:1 on --butter */

  /* ---- Product line: LAVENDER — Baby ---- */
  --lav:         #DACEEB;
  --lav-wash:    #ECE6F2;
  --lav-deep:    #6B44A6;
  --lav-text:    #6B44A6;   /* 4.6:1 on --lav */

  /* ---- Product line: AQUA — Athlete ---- */
  --aqua:        #AEE6DC;
  --aqua-wash:   #D8F1EB;
  --aqua-deep:   #128577;
  --aqua-text:   #0C6258;   /* 5.2:1 on --aqua */

  /* ---- Product line: PEACH — Travel ---- */
  --peach:       #F6C9A8;
  --peach-wash:  #F9E4D3;
  --peach-deep:  #D9663C;
  --peach-text:  #8A3616;   /* 5.3:1 on --peach */

  /* ---- Type ---- */
  --font-display: 'Cormorant Garamond', Cambria, Georgia, 'Times New Roman', serif;
  --font-body:    'Lato', Calibri, Carlito, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.75rem, 8vw, 5.75rem);
  --fs-h1:      clamp(2.25rem, 5.6vw, 4.25rem);
  --fs-h2:      clamp(1.875rem, 4.2vw, 2.875rem);
  --fs-h3:      clamp(1.375rem, 2.6vw, 1.875rem);
  --fs-h4:      clamp(1.125rem, 1.8vw, 1.3125rem);
  --fs-lead:    clamp(1.0625rem, 1.8vw, 1.3125rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8125rem;
  --fs-label:   0.6875rem;

  --lh-tight:   1.04;
  --lh-snug:    1.18;
  --lh-body:    1.65;

  /* ---- Space (spacious scale) ---- */
  --s-1:  0.5rem;
  --s-2:  1rem;
  --s-3:  1.5rem;
  --s-4:  2rem;
  --s-5:  3rem;
  --s-6:  4rem;
  --s-7:  6rem;
  --s-8:  8rem;
  --section:   clamp(4rem, 9vw, 8rem);
  --section-sm: clamp(3rem, 6vw, 5rem);
  --gutter:    clamp(1.25rem, 4vw, 3rem);
  --measure:   62ch;

  /* ---- Radius ---- */
  --r-sm:   0.75rem;
  --r-md:   1.125rem;
  --r-lg:   1.5rem;
  --r-xl:   1.75rem;
  --r-pill: 999px;

  /* ---- Motion ---- */
  --e-out:  cubic-bezier(.22, .61, .36, 1);
  --e-soft: cubic-bezier(.32, .72, .28, 1);
  --t-fast: 160ms;
  --t-base: 240ms;
  --t-slow: 420ms;

  /* ---- Elevation (soft, never heavy) ---- */
  --sh-sm: 0 1px 2px rgba(32,48,43,.04), 0 4px 12px rgba(32,48,43,.05);
  --sh-md: 0 2px 6px rgba(32,48,43,.05), 0 14px 34px rgba(32,48,43,.07);
  --sh-lg: 0 4px 12px rgba(32,48,43,.06), 0 28px 64px rgba(32,48,43,.09);

  --header-h: 74px;
}