/*
  North Card Show — Design Tokens
  Sistema de diseño: fantasía medieval / TCG épico (referencia: universo visual
  de Magic: The Gathering — aura mágica, pergamino, metal grabado, vitral).
  Tema único y bloqueado: oscuro (carbón + luz mágica turquesa/oro).
*/

:root {
  /* ---------- Color / Primario — Turquesa Arena ---------- */
  --turquesa-50:  #E6F7F6;
  --turquesa-100: #C5ECEB;
  --turquesa-200: #9DDEDC;
  --turquesa-300: #6FCFCD;
  --turquesa-400: #45BBB9;
  --turquesa-500: #22A6A4; /* marca */
  --turquesa-600: #1B8786;
  --turquesa-700: #166B6A;
  --turquesa-800: #11514F;
  --turquesa-900: #0C3736;

  /* ---------- Color / Acento — Oro Arena ---------- */
  --oro-300: #EDD7A0;
  --oro-400: #E6C87C;
  --oro-500: #E0B85F; /* marca */
  --oro-600: #C79A45;
  --oro-700: #A67D33;

  /* ---------- Neutros ---------- */
  --neutral-paper:    #F4F8F7;
  --neutral-mist:     #C7D6D4;
  --neutral-slate-400:#8DA3A1;
  --neutral-slate-600:#5C706E;
  --neutral-slate-800:#2C4442;
  --neutral-carbon:   #0B2625;

  /* ---------- Superficies (tema oscuro bloqueado, retintadas hacia la
     escala turquesa — antes leían demasiado verde neutro) ---------- */
  --surface-base: var(--neutral-carbon);
  --surface-1: #174A55;              /* paneles elevados — azul-turquesa (B > G), como el fondo de referencia, no verdoso */
  --surface-2: #20626F;              /* cards — un paso más claro para que destaquen sobre el fondo */
  --surface-parchment: #EFE6D2;      /* paneles "pergamino" puntuales (tickets, formularios) */
  --surface-parchment-ink: #2B2115;  /* texto sobre pergamino */
  --border-hairline: rgba(199, 214, 212, 0.14);
  --border-hairline-strong: rgba(199, 214, 212, 0.28);
  --border-gold: rgba(224, 184, 95, 0.45);

  /* ---------- Superficies translúcidas (nav de cristal, inputs, degradado de footer) —
     azul-turquesa (B > G), igual familia que --surface-1/2 y el fondo ---------- */
  --surface-nav: rgba(14, 32, 39, 0.68);
  --surface-nav-scrolled: rgba(11, 26, 31, 0.86);
  --surface-field: rgba(16, 36, 43, 0.6);
  --surface-footer-glow: rgba(9, 50, 60, 0.28);

  /* ---------- Texto ---------- */
  --text-primary: var(--neutral-paper);
  --text-secondary: var(--neutral-mist);
  --text-muted: var(--neutral-slate-400);
  --text-on-gold: #241A08;
  --text-on-parchment: var(--surface-parchment-ink);

  /* ---------- Acento funcional ---------- */
  --accent: var(--turquesa-500);
  --accent-strong: var(--turquesa-300);
  --gold: var(--oro-500);
  --gold-strong: var(--oro-400);

  /* ---------- Tipografía ---------- */
  --font-display: "Cinzel", "Cinzel Decorative", "Trajan Pro", serif;
  --font-body: "EB Garamond", "Iowan Old Style", Georgia, serif;

  --fs-eyebrow: 0.86rem;
  --fs-body: 1.125rem;
  --fs-body-lg: 1.25rem;
  --fs-h6: 1.35rem;
  --fs-h5: 1.75rem;
  --fs-h4: 2.2rem;
  --fs-h3: 2.8rem;
  --fs-h2: clamp(2.4rem, 3.4vw, 3.6rem);
  --fs-h1: clamp(2.8rem, 4.6vw, 4.4rem);

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.65;

  --tracking-wide: 0.14em;
  --tracking-wider: 0.22em;

  /* ---------- Espaciado ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 6.5rem;
  --space-10: 9rem;

  --content-max: 1360px;
  --content-narrow: 760px;
  --nav-clearance: 112px;

  /* ---------- Radios (sistema doble documentado: pill en interactivos, suave en contenedores) ---------- */
  --radius-control: 999px;   /* botones, badges, chips, inputs pequeños */
  --radius-card: 14px;       /* cards, paneles */
  --radius-frame: 4px;       /* marcos "grabados" rectangulares con esquina cortada via clip-path */

  /* ---------- Sombra (tintadas al fondo, nunca negro puro) ---------- */
  --shadow-soft: 0 1px 2px rgba(6, 12, 12, 0.4), 0 8px 24px rgba(6, 14, 13, 0.35);
  --shadow-raised: 0 4px 10px rgba(6, 12, 12, 0.45), 0 20px 48px rgba(6, 14, 13, 0.45);
  --shadow-gold-glow: 0 0 0 1px var(--border-gold), 0 0 32px rgba(224, 184, 95, 0.18);
  --shadow-turq-glow: 0 0 40px rgba(34, 166, 164, 0.22);

  /* ---------- Movimiento ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-base: 300ms;
  --dur-slow: 620ms;
  --dur-slower: 900ms;

  /* ---------- Bisel doble (marco de metal grabado alrededor de paneles) ---------- */
  --bezel-metal: linear-gradient(155deg, #2F5560, #0A2A30 55%, #1D454E);
  --bezel-metal-edge: linear-gradient(155deg, rgba(224, 184, 95, 0.55), rgba(224, 184, 95, 0) 40%);
  --bezel-pad: 7px;
  --bezel-radius-outer: 22px;
  --bezel-radius-inner: 15px;

  --z-nav: 100;
  --z-modal-scrim: 200;
  --z-modal: 210;
  --z-grain: 5;
  --z-particles: 1;
}

/* Los titulos grandes (h1-h4) se definen para el ancho de escritorio y, en
   movil, una sola palabra larga (p. ej. "Patrocinadores") puede no caber en
   una linea y salirse del lateral. Se reduce el tamano minimo en pantallas
   pequenas para cualquier titulo del sitio, actual o futuro, sin tener que
   tocar cada seccion por separado. */
@media (max-width: 480px) {
  :root {
    --fs-h1: clamp(1.8rem, 9vw, 2.2rem);
    --fs-h2: clamp(1.6rem, 8.5vw, 2rem);
    --fs-h3: clamp(1.5rem, 8vw, 1.8rem);
    --fs-h4: clamp(1.25rem, 6vw, 1.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}