/* ==========================================================================
   TOKENS — the only place where design values live.
   Every other stylesheet (base, presets, components, pages) reads these; nothing else may hard-code a color,
   font size, radius or timing. See DESIGN_RULES.md.
   ========================================================================== */
:root {
  /* ---- Color ---- */
  --color-white: #ffffff;
  --color-black: #000000;
  --blue-100: #b0e0f8;
  --blue-200: #7dcaef;
  --blue-300: #55b6e5; /* primary */
  --blue-400: #32a2d8;
  --blue-500: #0f8ac5; /* text-blue: labels and text on white shapes */

  /* ---- Typography: Helvetica only, weights 400 / 700 only ---- */
  --font-base: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --tracking: -0.05em; /* "-50" tracking, on all text */
  --lh: 1.1;           /* line spacing, on all text */
  --lh-fine: 1.4;      /* the one exception: the smallest size (.text-fine) reads more openly, as in the sketches (lists, payment note) */
  --tracking-fine: 0em; /* …and it is set with normal letter spacing (measured on the sketches): -50 tracking makes small text look glued together */
  /* 6 sizes, proportional to the sketch: vw ratio of the sketch canvas, floor for mobile, cap for very wide screens */
  --fs-0: clamp(0.75rem, 1.15vw, 1.55rem); /* fine print: descriptions, prices, lists, notes (sketch: 13px of a 1144px canvas) */
  --fs-1: clamp(0.8rem, 1.8vw, 2.2rem);   /* desktop nav, footer links, copyright, small print */
  --fs-2: clamp(1rem, 2.05vw, 2.5rem);    /* body text (and the mobile menu dropdown) */
  --fs-3: clamp(1.1rem, 2.55vw, 3.1rem);  /* labels, pills, feature pills, stat labels, footer CTA */
  --fs-4: clamp(1.5rem, 3.7vw, 4.5rem);   /* large button labels, page titles */
  --fs-5: clamp(2rem, 5vw, 6.2rem);       /* display: hero title, H2, big numbers */

  /* ---- Shapes: the pill standard (three radii, nothing else) ---- */
  --pill-1: clamp(28px, 2.6vw, 56px);  /* PILL 1, the biggest: major sections (hero, footer, stats panel) */
  --pill-2: clamp(11px, 1.4vw, 28px);  /* PILL 2, the common pill: every button, the nav, rows, image windows.
                                          Kept under ~40% of the height of the lowest pill-2 shape (the nav bar), so it is never a capsule */
  --pill-3: clamp(5px, 0.7vw, 14px);   /* PILL 3, the smallest: only for a pill inside a pill 2 (knob, dots) */
  --liquid-blob: clamp(8rem, 21vw, 32rem);   /* the base diameter of a blob of the liquid gradient: the SAME size on every shape (a small pill sees a piece of one blob, not a whole crowd) */
  --liquid-wave: clamp(3000px, 190vw, 4200px);   /* the width of the biggest ribbon of the liquid gradient: bigger than ANY shape (a tall panel too), so a ribbon is always an open curve across it, never a closed ring */
  --pill-capsule: 999px;   /* the full capsule: ONLY the product color swatches (a tall pill) */
  --rim: clamp(2px, 0.21vw, 4px);      /* border of the original button kept around a hover flood (all buttons): 4px at 1920px,
                                          shrinking with the buttons so it stays the same fraction of them (≈5% of the height) on a phone */

  /* ---- Button margins: the space between a button's content and its edge (20% tighter than the first version) ---- */
  --btn-m: 0.44em;      /* around a knob (all sides) and above/below a label            (was 0.55em) */
  --btn-pad-x: 0.8em;   /* before a label                                               (was 1em)    */

  /* ---- The one glow: the "Comprar" button of the product page is the only element allowed a shadow / glow
          (a soft white halo + a blue-500 shadow underneath). Nothing else on the site has either. ---- */
  --glow: 0 0 1.1em rgb(255 255 255 / 0.7), 0 0.45em 1.4em rgb(15 138 197 / 0.6);
  /* ---- The other shadow: the tiles that lean on hover ([data-tilt]: the Acervo photos and the product tiles) cast a soft shadow of this color
          (and catch a soft white reflection). Nothing else on the site may have a shadow. ---- */
  --lift-color: rgb(0 0 0 / 0.16);

  /* ---- Motion: timings and curves sampled from lusion.co ("Our Approach" button); no overshoot, max 600ms ---- */
  --ease-out: cubic-bezier(0.35, 0, 0, 1);
  --ease-arrow: cubic-bezier(0.4, 0, 0, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.1, 1);   /* menu-button dots */
  --dur-1: 300ms;
  --dur-2: 400ms;     /* fill flood, arrow slide, nav pill slide */
  --dur-color: 500ms; /* text / arrow color */
  --dur-3: 560ms;     /* scroll reveals */

  /* ---- Layout ---- */
  --gutter: 1rem;
  --container-max: 100rem;
  --container-share: 81vw; /* content spans ~81% of the sketch canvas */
  --marquee-gap: clamp(0.75rem, 1.2vw, 1.6rem); /* space between marquee items AND between marquee rows (one value, both directions) */
  --card-inset: var(--marquee-gap);             /* space between a card's edge and the plate / controls placed on its photo */
  --edge: 12px;                                 /* margin between the window edge and the big rounded boxes (hero, Acervo boxes) */
  --box-pad: clamp(1.25rem, 1.6vw, 2.2rem);    /* inner padding of a content box (.box): text, fields and buttons sit this far from its edge */
}