/* ============================================================
   LAST MINUTE OUTDOORS — Design Tokens
   Single source of truth. All custom properties live here.
   ============================================================ */

:root {
  /* ── Color palette ── */
  --ink:        #17150F;   /* warm near-black — text, borders */
  --paper:      #F4EEE2;   /* warm paper — page background */
  --paper-2:    #FBF7EF;   /* card surface */
  --naranja:    #FF5A1E;   /* primary orange — CTAs, deal price, stamp */
  --naranja-ink:#C7400F;   /* darker orange for text on paper */
  --amber:      #FFB400;   /* board / urgency highlight */
  --board:      #1B1A16;   /* dark "flip board" panels */
  --board-text: #FFD27A;   /* amber text on board panels */
  --verde:      #2E6F4E;   /* incluye / success accents (use sparingly) */
  --linea:      #17150F;   /* default border color = ink */
  --muted:      #6B6457;   /* secondary text */
  --ok:         #2E6F4E;
  --danger:     #C0341D;

  /* ── Spacing / layout ── */
  --maxw:   1120px;
  --radius: 4px;           /* tickets are barely-rounded; keep it tight */
  --gap:    16px;

  /* ── Shadows (hard/offset only — no soft blurs on components) ── */
  --shadow-hard:    4px 4px 0 var(--ink);
  --shadow-naranja: 4px 4px 0 var(--naranja-ink);
  --shadow-board:   4px 4px 0 rgba(0,0,0,0.6);

  /* ── Typography ── */
  --font-display: "Anton", sans-serif;
  --font-mono:    "Space Mono", monospace;
  --font-body:    "Inter", system-ui, sans-serif;

  /* ── Type scale ── */
  --text-hero:  clamp(48px, 7vw, 72px);
  --text-h1:    clamp(32px, 4vw, 48px);
  --text-h2:    clamp(28px, 3.5vw, 40px);
  --text-h3:    clamp(22px, 2.5vw, 30px);
  --text-lg:    18px;
  --text-base:  16px;
  --text-sm:    14px;
  --text-xs:    13px;
}

/* ============================================================
   RESET & BASE STYLES
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.05;
  letter-spacing: 0.01em;
  margin: 0 0 0.5em;
  color: var(--ink);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-lg); font-family: var(--font-body); font-weight: 700; }

p {
  margin: 0 0 1em;
}

a {
  color: var(--naranja-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.15s;
}
a:hover {
  color: var(--naranja);
}
a:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
  border-radius: var(--radius);
}

img, svg {
  max-width: 100%;
  display: block;
}

ul, ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
}

hr {
  border: none;
  border-top: 1.5px solid var(--ink);
  margin: var(--gap) 0;
}

/* Dashed rule variant for ticket-feel separators */
.rule--dash {
  border-top-style: dashed;
  opacity: 0.35;
}

/* Focus visible ring — global visible state */
:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

/* Selection */
::selection {
  background: var(--naranja);
  color: var(--paper);
}