/* ============================================================
   AQUA & VESTIS — Design System
   Tokens de marca: colores, tipografía, espaciado, sombras
   Cargar ANTES de style.css en index.html
   ============================================================ */

/* ── Fuentes de marca ─────────────────────────────────────── */
@font-face {
  font-family: 'EuropaNuova';
  src: url('../assets/brand/EuropaNuovaBold.woff2') format('woff2'),
       url('../assets/brand/EuropaNuovaBold.ttf')   format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Helvetica';
  src: url('../assets/brand/Helvetica.woff2') format('woff2'),
       url('../assets/brand/Helvetica.ttf')   format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Variables globales ───────────────────────────────────── */
:root {

  /* Paleta de marca */
  --av-navy:        #15234A;
  --av-navy-80:     rgba(21, 35, 74, 0.80);
  --av-navy-40:     rgba(21, 35, 74, 0.40);
  --av-navy-15:     rgba(21, 35, 74, 0.15);
  --av-navy-08:     rgba(21, 35, 74, 0.08);
  --av-navy-04:     rgba(21, 35, 74, 0.04);

  --av-gold:        #C3986B;
  --av-gold-dark:   #a87d52;
  --av-gold-15:     rgba(195, 152, 107, 0.15);
  --av-gold-08:     rgba(195, 152, 107, 0.08);

  --av-gray:        #606060;
  --av-gray-light:  #8a8a8a;
  --av-gray-08:     rgba(96, 96, 96, 0.08);

  --av-cream:       #F0F0EC;
  --av-cream-dark:  #E4E4DF;

  --av-white:       #FFFFFF;

  /* Semánticos (mapeo a paleta) */
  --color-bg:           var(--av-cream);
  --color-bg-card:      var(--av-white);
  --color-bg-surface:   var(--av-cream);
  --color-bg-nav:       var(--av-navy);
  --color-bg-overlay:   rgba(21, 35, 74, 0.55);

  --color-text-primary:   var(--av-navy);
  --color-text-secondary: var(--av-gray);
  --color-text-muted:     var(--av-gray-light);
  --color-text-on-dark:   var(--av-white);
  --color-text-gold:      var(--av-gold);

  --color-accent:         var(--av-gold);
  --color-accent-dark:    var(--av-gold-dark);
  --color-primary:        var(--av-navy);
  --color-primary-hover:  #1c2f64;

  --color-border:         var(--av-navy-15);
  --color-border-light:   var(--av-navy-08);
  --color-border-focus:   var(--av-gold);

  /* Estado */
  --color-success:        #166534;
  --color-success-bg:     #dcfce7;
  --color-error:          #991b1b;
  --color-error-bg:       #fee2e2;
  --color-warning:        #92400e;
  --color-warning-bg:     #fef3c7;
  --color-info:           var(--av-navy);
  --color-info-bg:        var(--av-navy-08);

  /* Tipografía */
  --font-display:   'EuropaNuova', -apple-system, system-ui, sans-serif;
  --font-body:      'Helvetica', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:      'SF Mono', 'Fira Code', Consolas, monospace;

  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;

  --leading-tight:  1.15;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.05em;
  --tracking-wider:   0.10em;
  --tracking-widest:  0.16em;

  /* Espaciado (múltiplos de 4px) */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* Bordes */
  --radius-xs:  4px;
  --radius-sm:  8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Sombras (estilo Apple: suaves, multicapa) */
  --shadow-xs:  0 1px 2px rgba(21,35,74,0.06);
  --shadow-sm:  0 1px 3px rgba(21,35,74,0.08), 0 2px 6px rgba(21,35,74,0.05);
  --shadow-md:  0 2px 8px rgba(21,35,74,0.08), 0 6px 20px rgba(21,35,74,0.06);
  --shadow-lg:  0 4px 16px rgba(21,35,74,0.10), 0 12px 40px rgba(21,35,74,0.08);
  --shadow-inset: inset 0 1px 3px rgba(21,35,74,0.08);

  /* Transiciones */
  --transition-fast:   0.15s ease;
  --transition-base:   0.22s ease;
  --transition-slow:   0.35s ease;

  /* Layout */
  --max-width-kiosk: 480px;
  --max-width-admin: 1280px;
  --sidebar-width:   220px;

  /* Assets de marca */
  --logo-principal:   url('../assets/brand/IMAGOTIPO_PRINCIPAL.png');
  --logo-negativo:    url('../assets/brand/IMAGOTIPO_NEGATIVO.png');
  --logo-circular:    url('../assets/brand/IMAGOTIPO_CIRCULAR-1.png');
  --patron-1:         url('../assets/brand/PATRÓN-1.jpg');
  --patron-2:         url('../assets/brand/PATRÓN-2.jpg');
}

/* ── Reset base ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  line-height: var(--leading-normal);
}

/* ── Tipografía base ──────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }
h5 { font-size: var(--text-md); }

p { line-height: var(--leading-relaxed); }

/* ── Eyebrow / label de sección ─────────────────────────── */
.av-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-gold);
}

/* ── Botones ──────────────────────────────────────────────── */
.av-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: var(--radius-sm);
  padding: 10px var(--space-5);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  text-decoration: none;
  white-space: nowrap;
}

.av-btn--primary {
  background: var(--color-primary);
  color: var(--av-white);
}
.av-btn--primary:hover  { background: var(--color-primary-hover); box-shadow: var(--shadow-sm); }
.av-btn--primary:active { transform: scale(0.98); }

.av-btn--gold {
  background: var(--av-gold);
  color: var(--av-white);
}
.av-btn--gold:hover  { background: var(--av-gold-dark); box-shadow: var(--shadow-sm); }
.av-btn--gold:active { transform: scale(0.98); }

.av-btn--outline {
  background: transparent;
  color: var(--color-primary);
  border: 1.5px solid var(--color-border);
}
.av-btn--outline:hover  { border-color: var(--av-navy-40); background: var(--av-navy-04); }
.av-btn--outline:active { transform: scale(0.98); }

.av-btn--ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border: none;
}
.av-btn--ghost:hover { background: var(--av-navy-04); color: var(--color-primary); }

.av-btn--lg { padding: 14px var(--space-8); font-size: var(--text-base); border-radius: var(--radius-md); }
.av-btn--sm { padding: 6px var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-xs); }
.av-btn--full { width: 100%; }

/* ── Cards ────────────────────────────────────────────────── */
.av-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-md);
  border: 0.5px solid var(--color-border);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-xs);
}

.av-card--surface {
  background: var(--av-cream);
  border-color: var(--color-border-light);
  box-shadow: none;
}

.av-card--navy {
  background: var(--av-navy);
  border-color: transparent;
  color: var(--av-white);
}

/* ── Inputs ───────────────────────────────────────────────── */
.av-input {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  background: var(--av-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  width: 100%;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
}
.av-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px var(--av-gold-15);
}
.av-input::placeholder { color: var(--color-text-muted); }

/* ── Badges ───────────────────────────────────────────────── */
.av-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  font-weight: 700;
  padding: 3px 9px;
  border-radius: var(--radius-full);
  letter-spacing: 0.02em;
}
.av-badge--success { background: var(--color-success-bg); color: var(--color-success); }
.av-badge--error   { background: var(--color-error-bg);   color: var(--color-error); }
.av-badge--warning { background: var(--color-warning-bg); color: var(--color-warning); }
.av-badge--navy    { background: var(--av-navy-08);       color: var(--av-navy); }
.av-badge--gold    { background: var(--av-gold-15);       color: var(--av-gold-dark); }

/* ── Patrón decorativo ────────────────────────────────────── */
.av-pattern {
  background-image: var(--patron-2);
  background-size: cover;
  background-position: center;
  opacity: 0.18;
}

.av-pattern--1 {
  background-image: var(--patron-1);
  opacity: 0.18;
}

/* ── Separador de sección ─────────────────────────────────── */
.av-divider {
  height: 1px;
  background: var(--color-border-light);
  border: none;
  margin: var(--space-4) 0;
}

/* ── Utilidades ───────────────────────────────────────────── */
.av-text-gold    { color: var(--av-gold); }
.av-text-navy    { color: var(--av-navy); }
.av-text-muted   { color: var(--color-text-muted); }
.av-bg-navy      { background: var(--av-navy); }
.av-bg-cream     { background: var(--av-cream); }
.av-bg-gold      { background: var(--av-gold); }
.av-font-display { font-family: var(--font-display); font-weight: 700; }
.av-font-body    { font-family: var(--font-body); }