/* =========================================================================
   Warewild Design System — Tokens (v2, post-screenshot pass)
   Brand: campamentos y retiros con todo incluido
   ========================================================================= */

/* ------------------------------- WEB FONTS ------------------------------- */
/* Warewild official typeface: Lato. Loaded from local TTF files in fonts/.   */

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Hairline.ttf') format('truetype');
  font-weight: 100; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-HairlineItalic.ttf') format('truetype');
  font-weight: 100; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Light.ttf') format('truetype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-LightItalic.ttf') format('truetype');
  font-weight: 300; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Regular.ttf') format('truetype');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Italic.ttf') format('truetype');
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Bold.ttf') format('truetype');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BoldItalic.ttf') format('truetype');
  font-weight: 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-Black.ttf') format('truetype');
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato-BlackItalic.ttf') format('truetype');
  font-weight: 900; font-style: italic; font-display: swap;
}

/* ============================== ROOT TOKENS ============================== */
:root {
  /* ---------- Color · brand ---------- */
  --ww-blue:          #1297E0;   /* primary brand sky-blue — header bg, links, CTA */
  --ww-blue-hover:    #0F80C2;
  --ww-blue-press:    #0C6BA3;
  --ww-blue-soft:     #E6F3FB;   /* light tinted backgrounds (info boxes, icon circles) */
  --ww-blue-softer:   #F2F9FD;   /* very pale fill */

  /* ---------- Color · neutrals (ink) ---------- */
  --ww-ink:           #1A1A1A;   /* near-black H2 / H1 — heavy weight headings */
  --ww-ink-2:         #2E2E2E;   /* body emphasis */
  --ww-ink-3:         #3D3D3D;   /* body */
  --ww-muted:         #6B7280;   /* secondary */
  --ww-muted-soft:    #9CA3AF;   /* tertiary / placeholder */

  /* ---------- Color · semantic ---------- */
  --ww-green:         #1BA065;   /* success — checks, "Gratis", positive */
  --ww-green-soft:    #E7F6EE;
  --ww-red:           #D63031;   /* urgency — "Nos quedan X", crossed-out prices */
  --ww-red-soft:      #FDECEC;
  --ww-amber:         #F2A800;   /* "Modificar fechas" date-input frame */
  --ww-amber-soft:    #FFF4DA;

  /* ---------- Color · review avatars (decorative) ---------- */
  --ww-av-green:      #2BB673;
  --ww-av-orange:     #E07B27;
  --ww-av-pink:       #C2185B;
  --ww-av-purple:     #6A4DBA;
  --ww-av-teal:       #117A8B;

  /* ---------- Color · surfaces ---------- */
  --ww-canvas:        #FFFFFF;   /* white — main content cards */
  --ww-surface:       #F4F5F6;   /* light gray — page background */
  --ww-surface-2:     #ECEEF1;   /* slightly deeper */
  --ww-border:        #E5E7EB;   /* hairline borders */
  --ww-border-strong: #D1D5DB;

  /* ---------- Color · footer ---------- */
  --ww-slate:         #566375;   /* footer background — slate, not navy */
  --ww-slate-2:       #4A5664;   /* deeper slate */

  /* ---------- Color · semantic aliases ---------- */
  --ww-fg-1:          var(--ww-ink);
  --ww-fg-2:          var(--ww-ink-3);
  --ww-fg-3:          var(--ww-muted);
  --ww-fg-inverse:    #FFFFFF;
  --ww-bg-1:          var(--ww-canvas);
  --ww-bg-2:          var(--ww-surface);
  --ww-link:          var(--ww-blue);
  --ww-link-hover:    var(--ww-blue-hover);

  /* ---------- Type · families ---------- */
  /* Single family — Lato — used at different weights for display vs body. */
  --ww-font-display:  'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ww-font-sans:     'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ww-font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type · scale ---------- */
  --ww-text-2xs:    11px;
  --ww-text-xs:     12px;
  --ww-text-sm:     13px;
  --ww-text-base:   15px;
  --ww-text-md:     16px;
  --ww-text-lg:     18px;
  --ww-text-xl:     22px;
  --ww-text-2xl:    28px;
  --ww-text-3xl:    34px;
  --ww-text-4xl:    44px;
  --ww-text-5xl:    56px;

  /* ---------- Type · weights (mapped to Lato) ---------- */
  /* Lato ships: Hairline 100, Light 300, Regular 400, Bold 700, Black 900.
     500/600/800 fall back to the nearest weight available.                 */
  --ww-weight-hairline: 100;
  --ww-weight-light:    300;
  --ww-weight-regular:  400;
  --ww-weight-medium:   400;    /* mapped — no 500 in Lato */
  --ww-weight-semibold: 700;    /* mapped — no 600 in Lato */
  --ww-weight-bold:     700;
  --ww-weight-black:    900;

  /* ---------- Type · line-heights ---------- */
  --ww-leading-tight:   1.15;
  --ww-leading-snug:    1.3;
  --ww-leading-normal:  1.55;
  --ww-leading-relaxed: 1.7;

  /* ---------- Type · tracking ---------- */
  --ww-tracking-tight:  -0.025em;
  --ww-tracking-snug:   -0.01em;
  --ww-tracking-normal: 0;
  --ww-tracking-wide:   0.04em;

  /* ---------- Spacing (8-pt grid) ---------- */
  --ww-space-2xs:   2px;
  --ww-space-xs:    4px;
  --ww-space-sm:    8px;
  --ww-space-md:    12px;
  --ww-space-lg:    16px;
  --ww-space-xl:    24px;
  --ww-space-2xl:   32px;
  --ww-space-3xl:   48px;
  --ww-space-4xl:   64px;
  --ww-space-5xl:   96px;

  /* ---------- Radii ---------- */
  --ww-radius-sm:   4px;
  --ww-radius-md:   6px;    /* tight — inputs */
  --ww-radius-lg:   8px;    /* default — cards, buttons */
  --ww-radius-xl:   12px;   /* large containers */
  --ww-radius-2xl:  16px;
  --ww-radius-pill: 999px;

  /* ---------- Shadows ---------- */
  --ww-shadow-xs:   0 1px 2px rgba(20, 30, 50, 0.04);
  --ww-shadow-sm:   0 2px 6px rgba(20, 30, 50, 0.06);
  --ww-shadow-md:   0 6px 18px rgba(20, 30, 50, 0.08);
  --ww-shadow-lg:   0 12px 30px rgba(20, 30, 50, 0.12);
  --ww-shadow-ring: 0 0 0 3px rgba(18, 151, 224, 0.25);    /* focus */

  /* ---------- Layout ---------- */
  --ww-container:   1200px;
  --ww-gutter:      24px;
  --ww-col-content: 720px;
  --ww-col-aside:   340px;

  /* ---------- Motion ---------- */
  --ww-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --ww-dur-fast:    120ms;
  --ww-dur-base:    180ms;
  --ww-dur-slow:    280ms;

  /* ---------- Z-index ---------- */
  --ww-z-header:    100;
  --ww-z-sticky:    50;
  --ww-z-overlay:   200;
  --ww-z-modal:     300;
}

/* ============================= SEMANTIC TYPE ============================= */

.ww-h1, h1.ww {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-weight-black);
  font-size: clamp(var(--ww-text-3xl), 4.5vw, var(--ww-text-5xl));
  line-height: var(--ww-leading-tight);
  letter-spacing: var(--ww-tracking-tight);
  color: var(--ww-fg-1);
  margin: 0 0 var(--ww-space-lg);
  text-wrap: balance;
}

.ww-h2, h2.ww {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-weight-black);
  font-size: clamp(var(--ww-text-2xl), 3vw, var(--ww-text-3xl));
  line-height: var(--ww-leading-snug);
  letter-spacing: var(--ww-tracking-snug);
  color: var(--ww-fg-1);
  margin: 0 0 var(--ww-space-md);
}

.ww-h3, h3.ww {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-weight-bold);
  font-size: var(--ww-text-xl);
  line-height: var(--ww-leading-snug);
  color: var(--ww-fg-1);
  margin: 0 0 var(--ww-space-sm);
}

.ww-h4, h4.ww {
  font-family: var(--ww-font-sans);
  font-weight: var(--ww-weight-bold);
  font-size: var(--ww-text-lg);
  line-height: var(--ww-leading-snug);
  color: var(--ww-fg-1);
  margin: 0 0 var(--ww-space-sm);
}

.ww-eyebrow {
  font-family: var(--ww-font-sans);
  font-weight: var(--ww-weight-bold);
  font-size: var(--ww-text-xs);
  letter-spacing: var(--ww-tracking-wide);
  text-transform: uppercase;
  color: var(--ww-blue);
}

.ww-lead, p.ww-lead {
  font-family: var(--ww-font-sans);
  font-weight: var(--ww-weight-regular);
  font-size: var(--ww-text-lg);
  line-height: var(--ww-leading-normal);
  color: var(--ww-fg-2);
}

.ww-p, p.ww {
  font-family: var(--ww-font-sans);
  font-weight: var(--ww-weight-regular);
  font-size: var(--ww-text-md);
  line-height: var(--ww-leading-normal);
  color: var(--ww-fg-2);
  text-wrap: pretty;
}

.ww-small, small.ww {
  font-family: var(--ww-font-sans);
  font-size: var(--ww-text-sm);
  line-height: var(--ww-leading-normal);
  color: var(--ww-fg-3);
}

.ww-caption {
  font-family: var(--ww-font-sans);
  font-size: var(--ww-text-xs);
  line-height: var(--ww-leading-normal);
  color: var(--ww-fg-3);
}

.ww-label {
  font-family: var(--ww-font-sans);
  font-weight: var(--ww-weight-bold);
  font-size: var(--ww-text-sm);
  letter-spacing: var(--ww-tracking-snug);
  color: var(--ww-fg-1);
}

.ww-link {
  color: var(--ww-link);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--ww-dur-fast) var(--ww-ease);
}
.ww-link:hover { color: var(--ww-link-hover); text-decoration: underline; }

/* Logotype — lowercase "warewild" wordmark */
.ww-logotype {
  font-family: var(--ww-font-display);
  font-weight: var(--ww-weight-black);
  font-size: var(--ww-text-xl);
  letter-spacing: -0.025em;
  color: var(--ww-blue);
  text-transform: lowercase;
}

/* ============================== UTILITIES =============================== */
.ww-container {
  max-width: var(--ww-container);
  margin: 0 auto;
  padding: 0 var(--ww-gutter);
}
.ww-stack > * + * { margin-top: var(--ww-space-lg); }
.ww-row { display: flex; gap: var(--ww-space-md); align-items: center; }

.ww-body {
  font-family: var(--ww-font-sans);
  font-size: var(--ww-text-md);
  line-height: var(--ww-leading-normal);
  color: var(--ww-fg-1);
  background: var(--ww-bg-2);
  -webkit-font-smoothing: antialiased;
}