/* =====================================================================
   Spottune Colombia · design tokens
   Source: Spottune Brand Guidelines v1 (BRIEF §2). Only these hues exist.
   ===================================================================== */
:root{
  /* --- colour (70/20/10) --- */
  --st-black:#282828;        /* near black · text, dark bands, logo */
  --st-cream:#F5EFE7;        /* warm cream · light surface, alternating sections */
  --st-white:#FFFFFF;        /* clean sections, product backgrounds */
  --st-gray:#C2C0C0;         /* mid gray · dividers, disabled, decorative only */
  --st-gray-text:#6B6B6B;    /* readable metadata / captions (contrast ≥ 4.5:1 on white & cream) */
  --st-line:#EEEEEE;         /* utility · borders, rules, table lines. Never a surface */
  --st-teal:#335C67;         /* the ONLY accent: links, focus, active states, Cloud highlights */
  /* --st-burgundy #5C1A33 is intentionally NOT defined: never used on this site */
  /* WhatsApp green (client decision, BRIEF §13.7 — supersedes §11.4):
     ONLY the .fab-wa circle (WhatsApp logotype) and the WhatsApp glyph inside .btn-wa.
     .btn-wa itself is the brand button again (#282828 / #FFFFFF). Nothing else on the site uses #25D366. */
  --wa:#25D366;
  --wa-hover:#1EBE5D;      /* .fab-wa hover only */

  /* derived, translucent helpers (same hues, different alpha) */
  --st-black-a06:rgba(40,40,40,.06);
  --st-black-a12:rgba(40,40,40,.12);
  --st-black-a20:rgba(40,40,40,.20);
  --st-cream-a14:rgba(245,239,231,.14);
  --st-cream-a60:rgba(245,239,231,.60);
  --st-cream-a78:rgba(245,239,231,.78);
  --st-teal-a12:rgba(51,92,103,.12);
  --st-white-a86:rgba(255,255,255,.86);

  /* semantic aliases */
  --bg:var(--st-white);
  --fg:var(--st-black);
  --fg-muted:var(--st-gray-text);
  --line:var(--st-line);
  --accent:var(--st-teal);

  /* --- typography (Roboto only) --- */
  --font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --fs-display:clamp(42px,5.2vw,72px);   /* H1 / statements */
  --fs-h2:clamp(28px,3.4vw,40px);
  --fs-h3:clamp(18px,1.6vw,22px);
  --fs-h4:17px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-body-sm:15px;   /* secondary body copy inside cards (BRIEF §2.2 body band 15–17px) */
  --fs-small:14px;
  --fs-caption:13px;
  --fs-eyebrow:12px;
  --lh-body:1.6;
  --lh-head:1.12;
  --lh-tight:1.04;
  --ls-eyebrow:.12em;
  --ls-tight:-.02em;
  --w-light:300; --w-regular:400; --w-medium:500; --w-bold:700; --w-black:900;

  /* --- shape --- */
  --r:16px;          /* cards, media, panels */
  --r-md:12px;       /* inputs, icon boxes, callouts */
  --r-sm:10px;
  --r-pill:999px;    /* buttons, pills, badges */

  /* --- spacing (8px steps) --- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-5:40px; --sp-6:48px; --sp-7:56px; --sp-8:64px;
  --gutter:24px;
  --sec-pad:clamp(72px,9vw,120px);
  --maxw:1200px;
  --header-h:72px;

  /* --- motion --- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --dur:.3s;
  --dur-slow:.6s;

  /* --- layers (low → high): content < glow < consent < fab < drawer < header < toast < lightbox --- */
  --z-glow:50;
  --z-consent:54;    /* cookie banner: above content, below the FAB (they never overlap: bottom-left vs bottom-right) */
  --z-fab:56;        /* WhatsApp FAB: above every content layer, below the mobile drawer (BRIEF §10.7) */
  --z-drawer:59;
  --z-header:60;
  --z-toast:90;
  --z-lightbox:95;   /* full-screen photo lightbox: above everything, including toasts */

  /* --- elevation (one logic for every floating piece of chrome) --- */
  --elev:0 10px 28px rgba(40,40,40,.14);
  --elev-hi:0 14px 34px rgba(40,40,40,.20);

  /* --- misc --- */
  --ring:inset 0 0 0 1px var(--st-line);
  --focus:0 0 0 2px var(--st-teal);
  color-scheme:light;
}