/* =============================================================
   THE GIVING WATER — Design Tokens
   The single source of truth for color, type, space, motion.
   Palette inspired by American water: crystal blues, deep rivers,
   clear streams, soft whites, weathered grays, subtle rich red.
   ============================================================= */

:root {
  /* ---- Brand blues (center-out light→dark logic for bottles) ---- */
  --stream-50:  #f2fafe;
  --stream-100: #e2f4fc;
  --stream-200: #c9e9f6;
  --stream-300: #a5d8ee;
  --crystal-400:#6ec4e8;
  --crystal-500:#37b6e9;   /* bright crystal accent */
  --brand-500:  #1c86c9;   /* logo mid blue */
  --brand-600:  #1670ad;
  --river-700:  #0f5488;
  --river-800:  #0b3f68;
  --river-900:  #0a2a43;   /* deep river navy */
  --abyss:      #071d2e;

  /* ---- Neutrals: soft whites & weathered grays ---- */
  --white:      #ffffff;
  --paper:      #f7fbfd;   /* soft white page */
  --mist:       #eef5f9;
  --fog:        #dde7ee;
  --stone-300:  #c2cfd8;
  --stone-400:  #9aabb6;
  --stone-500:  #6f8593;
  --slate-600:  #4d626f;
  --slate-700:  #33454f;
  --ink:        #12232e;   /* body text */
  --ink-soft:   #34474f;

  /* ---- Patriotic accent (subtle, used sparingly) ---- */
  --red-500:    #c0392b;
  --red-600:    #a5281c;
  --gold-400:   #e8b24c;   /* warm sunlight highlight */

  /* ---- Semantic assignments ---- */
  --bg:              var(--paper);
  --bg-elevated:     var(--white);
  --bg-deep:         var(--river-900);
  --bg-deep-2:       var(--river-800);
  --text:            var(--ink);
  --text-muted:      var(--slate-600);
  --text-onDark:     #eaf5fb;
  --text-onDark-mut: #a9c6d8;
  --link:            var(--brand-600);
  --link-hover:      var(--river-800);
  --border:          #e2ebf1;
  --border-strong:   #cbdae4;
  --focus:           #ffcf5a;      /* high-contrast focus ring */

  /* ---- Primary action gradient (ripple buttons) ---- */
  --grad-brand: linear-gradient(135deg, var(--crystal-500) 0%, var(--brand-500) 45%, var(--river-700) 100%);
  --grad-deep:  linear-gradient(160deg, var(--river-800) 0%, var(--abyss) 100%);
  --grad-sky:   linear-gradient(180deg, #d8eefb 0%, #eff8fd 60%, var(--paper) 100%);
  --grad-hero:  linear-gradient(180deg, #06263f 0%, #0b3f68 45%, #12608f 100%);
  --grad-glass: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.15));

  /* Bottle water fill: light at center, deepening outward (set per-bottle) */
  --bottle-fill: linear-gradient(180deg, #bfe6f7 0%, #7fcbee 40%, #2ea3dc 100%);

  /* ---- Typography ---- */
  --font-head: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Libre Franklin", system-ui, -apple-system, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Code", Consolas, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --fs-hero:   clamp(2.7rem, 1.6rem + 5.4vw, 6rem);
  --fs-h1:     clamp(2.1rem, 1.4rem + 3.2vw, 3.9rem);
  --fs-h2:     clamp(1.65rem, 1.2rem + 2vw, 2.85rem);
  --fs-h3:     clamp(1.3rem, 1.05rem + 1.1vw, 1.85rem);
  --fs-h4:     clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-lead:   clamp(1.1rem, 1.02rem + .5vw, 1.4rem);
  --fs-body:   clamp(1rem, .97rem + .18vw, 1.12rem);
  --fs-small:  .875rem;
  --fs-eyebrow:.8rem;

  --lh-tight:  1.05;
  --lh-head:   1.12;
  --lh-snug:   1.35;
  --lh-body:   1.7;

  /* ---- Spacing scale (8pt rhythm, generous) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 3rem;    --sp-8: 4rem;
  --sp-9: 6rem;    --sp-10: 8rem;   --sp-11: 11rem;

  /* Section vertical rhythm (breathing room) */
  --section-y: clamp(3.5rem, 2rem + 6vw, 8rem);

  /* ---- Layout ---- */
  --maxw:       1240px;
  --maxw-wide:  1440px;
  --maxw-text:  68ch;
  --gutter:     clamp(1.15rem, .5rem + 2.5vw, 2.75rem);
  --radius-xs: 6px;  --radius-sm: 10px;  --radius: 16px;
  --radius-lg: 24px; --radius-xl: 34px;  --radius-pill: 999px;

  /* ---- Shadows (soft, water-light) ---- */
  --shadow-xs: 0 1px 2px rgba(11,63,104,.06);
  --shadow-sm: 0 2px 10px rgba(11,63,104,.08);
  --shadow:    0 10px 30px -12px rgba(11,63,104,.28);
  --shadow-md: 0 18px 48px -18px rgba(10,42,67,.35);
  --shadow-lg: 0 40px 90px -30px rgba(7,29,46,.45);
  --shadow-glow: 0 0 0 1px rgba(55,182,233,.4), 0 12px 40px -8px rgba(55,182,233,.55);
  --ring: 0 0 0 3px rgba(55,182,233,.35);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(.16,.84,.44,1);
  --ease-inout: cubic-bezier(.65,.05,.36,1);
  --ease-water: cubic-bezier(.36,.66,.28,1);
  --t-fast: .18s;
  --t: .32s;
  --t-slow: .6s;
  --t-lazy: 1.1s;

  /* ---- Z-index ladder ---- */
  --z-base: 1;
  --z-rail: 40;
  --z-header: 100;
  --z-float: 120;
  --z-overlay: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* Sticky header height (kept in sync with JS) */
  --header-h: 92px;
}

@media (max-width: 900px){
  :root{ --header-h: 68px; }
}

/* Respect users who want less motion */
@media (prefers-reduced-motion: reduce){
  :root{ --t-fast:.001s; --t:.001s; --t-slow:.001s; --t-lazy:.001s; }
}