/* ============================================================
   EL JAIBO UNDERGROUND — Design System
   Tokens base del sitio. Para cambiar la identidad visual,
   editar SOLO este archivo.
   ============================================================ */

:root {

  /* ---------- PALETA ----------
     Derivada de la foto del hero y del logo AirWair.
     Amarillo sobre negro: contraste 13.6:1 (AAA).      */
  --jaibo-black:      #0D0D0D;   /* fondo base                    */
  --jaibo-surface:    #1A1A1A;   /* cards, secciones alternas     */
  --jaibo-surface-2:  #242424;   /* hover, bordes suaves          */
  --jaibo-yellow:     #F2C200;   /* acento principal, CTAs        */
  --jaibo-yellow-dk:  #D4A800;   /* hover del acento              */
  --jaibo-green:      #2F4F3E;   /* verde bota, secundario        */
  --jaibo-cherry:     #6E1A1A;   /* cereza, terciario             */
  --jaibo-concrete:   #8A8A8A;   /* texto secundario              */
  --jaibo-white:      #F5F5F0;   /* texto principal               */
  --jaibo-danger:     #C1272D;   /* sale, agotado, errores        */
  --jaibo-success:    #3E8E5A;   /* confirmaciones                */

  --jaibo-border:     rgba(245, 245, 240, 0.12);
  --jaibo-border-str: rgba(245, 245, 240, 0.24);

  /* ---------- TIPOGRAFIA ---------- */
  --font-display: 'Anton', 'Arial Black', sans-serif;
  --font-ui:      'Barlow Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --fs-hero:   clamp(2.75rem, 9vw, 6.5rem);
  --fs-h1:     clamp(2.25rem, 6vw, 4rem);
  --fs-h2:     clamp(1.75rem, 4.5vw, 3rem);
  --fs-h3:     clamp(1.35rem, 3vw, 1.9rem);
  --fs-lead:   clamp(1rem, 1.6vw, 1.15rem);
  --fs-body:   1rem;
  --fs-small:  0.875rem;
  --fs-micro:  0.75rem;

  --lh-tight:  1.05;
  --lh-normal: 1.6;
  --ls-display: 0.02em;
  --ls-ui:      0.08em;   /* tracking amplio para etiquetas */

  /* ---------- ESPACIADO ---------- */
  --space-unit: 8px;
  --space-xs:   calc(var(--space-unit) * 1);    /*  8px */
  --space-sm:   calc(var(--space-unit) * 2);    /* 16px */
  --space-md:   calc(var(--space-unit) * 3);    /* 24px */
  --space-lg:   calc(var(--space-unit) * 5);    /* 40px */
  --space-xl:   calc(var(--space-unit) * 8);    /* 64px */
  --space-2xl:  calc(var(--space-unit) * 12);   /* 96px */
  --section-y:  clamp(3.5rem, 8vw, 7rem);

  /* ---------- FORMAS ---------- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  /* ---------- SOMBRAS ---------- */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 8px 24px rgba(0,0,0,.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.6);
  --shadow-yellow: 0 4px 20px rgba(242,194,0,.25);

  /* ---------- TRANSICIONES ---------- */
  --t-fast:  150ms cubic-bezier(.4,0,.2,1);
  --t-base:  250ms cubic-bezier(.4,0,.2,1);
  --t-slow:  400ms cubic-bezier(.4,0,.2,1);

  /* ---------- CAPAS ---------- */
  --z-base:     1;
  --z-sticky:   1020;
  --z-navbar:   1030;
  --z-dropdown: 1040;
  --z-modal:    1055;
  --z-float:    1060;
  --z-toast:    1080;

  /* ---------- ALTURAS ---------- */
  --h-anuncio: 40px;
  --h-navbar:  76px;

  /* ============================================================
     OVERRIDES DE BOOTSTRAP 5
     Reasignamos las variables del framework a nuestros tokens
     para que componentes nativos (botones, alerts, forms)
     hereden la identidad sin CSS extra.
     ============================================================ */
  --bs-body-bg:          var(--jaibo-black);
  --bs-body-color:       var(--jaibo-white);
  --bs-body-font-family: var(--font-body);
  --bs-body-font-size:   var(--fs-body);
  --bs-body-line-height: var(--lh-normal);

  --bs-primary:      #F2C200;
  --bs-primary-rgb:  242, 194, 0;
  --bs-secondary:    #2F4F3E;
  --bs-danger:       #C1272D;
  --bs-success:      #3E8E5A;
  --bs-dark:         #0D0D0D;
  --bs-light:        #F5F5F0;

  --bs-border-color: var(--jaibo-border);
  --bs-border-radius: var(--radius-md);
  --bs-link-color:   var(--jaibo-yellow);
  --bs-link-hover-color: var(--jaibo-yellow-dk);

  --bs-emphasis-color: var(--jaibo-white);
  --bs-secondary-color: var(--jaibo-concrete);
}

/* ============================================================
   MODO CLARO (preparado, no activo)
   Agregar la clase .light-mode al <body> para activarlo.
   La arquitectura de tokens permite el switch sin tocar componentes.
   ============================================================ */
body.light-mode {
  --jaibo-black:     #F5F5F0;
  --jaibo-surface:   #FFFFFF;
  --jaibo-surface-2: #EDEDE8;
  --jaibo-white:     #0D0D0D;
  --jaibo-concrete:  #5A5A5A;
  --jaibo-border:    rgba(13, 13, 13, 0.12);
  --jaibo-border-str:rgba(13, 13, 13, 0.24);
  --bs-body-bg:      #F5F5F0;
  --bs-body-color:   #0D0D0D;
}

/* ============================================================
   BASE
   ============================================================ */
html {
  scroll-behavior: smooth;
  /* Compensa navbar sticky al saltar a un ancla */
  scroll-padding-top: calc(var(--h-navbar) + 8px);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  background-color: var(--jaibo-black);
  color: var(--jaibo-white);
  font-family: var(--font-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- TITULOS ---------- */
h1, h2, h3, .display-jaibo {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  text-transform: uppercase;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

h4, h5, h6, .ui-label {
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--ls-ui);
  text-transform: uppercase;
}

/* ---------- ENLACES ---------- */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--jaibo-yellow); }

/* ---------- FOCO ACCESIBLE ----------
   Nunca eliminar: es el unico indicador para navegacion por teclado. */
:focus-visible {
  outline: 3px solid var(--jaibo-yellow);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- SELECCION ---------- */
::selection {
  background: var(--jaibo-yellow);
  color: var(--jaibo-black);
}

/* ---------- SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--jaibo-black); }
::-webkit-scrollbar-thumb {
  background: var(--jaibo-surface-2);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--jaibo-yellow); }

/* ---------- SALTAR AL CONTENIDO (a11y) ---------- */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-sm);
  z-index: var(--z-toast);
  background: var(--jaibo-yellow);
  color: var(--jaibo-black);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: var(--ls-ui);
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--space-sm); color: var(--jaibo-black); }