/* ══════════════════════════════════════════════════════════════════════
   ANDOR HOME · DESIGN TOKENS COMPARTIDOS
   ──────────────────────────────────────────────────────────────────────
   Variables CSS unificadas entre la web pública y el CRM operativo.
   Se importan así en ambos HTML (después del `<title>`, antes del
   resto de estilos):

       <link rel="stylesheet" href="./04_andor-tokens.css">

   Cualquier valor de marca (color, tipo, espaciado) debe vivir aquí
   y NUNCA hardcoded en componentes. Así basta cambiar un valor para
   actualizar ambos productos.

   v1.0 · 11 mayo 2026
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Fuentes (carga única, evita doble request) ────────────────────── */
/*
   El CRM usaba Cormorant Garamond + Jost.
   La web usaba Cormorant Garamond + Inter (+ Outfit no usado).
   Decisión: Jost en ambos. Va mejor con Cormorant y es más distintivo.
   Quien importe este archivo NO necesita cargar otras fuentes para
   las superficies de marca.
*/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Jost:wght@300;400;500;600;700&display=swap');

:root{
  /* ═══ Color ═══════════════════════════════════════════════════════
     Modo dark por defecto (modo operativo del CRM y hero de la web).
     El modo claro se activa con [data-theme="light"] al final.        */

  /* Superficies neutras */
  --andor-bg:        #0a0a0a;
  --andor-bg-2:      #111113;
  --andor-bg-3:      #181819;
  --andor-bg-4:      #202023;
  --andor-line:      rgba(184, 144, 96, 0.18);
  --andor-line-2:    #252527;

  /* Acento primario — Roble (madera de la oficina Andor)
     Variable names kept as "gold" for backward compat with web+CRM.
     Valores anteriores (gold): #c8a96e / #e2c992 / #9a7d3f            */
  --andor-gold:        #B89060;
  --andor-gold-light:  #D4B88A;
  --andor-gold-dark:   #96724A;
  --andor-gold-bg:     rgba(184, 144, 96, 0.08);
  --andor-gold-bd:     rgba(184, 144, 96, 0.35);

  /* Acento secundario — Cemento (suelo de la oficina Andor) */
  --andor-stone:       #8B7D72;
  --andor-stone-light: #A89E95;
  --andor-stone-dark:  #6B6058;
  --andor-stone-bg:    rgba(139, 125, 114, 0.10);
  --andor-stone-bd:    rgba(139, 125, 114, 0.35);

  /* Texto */
  --andor-ink:       #f0ebe2;   /* texto principal */
  --andor-ink-2:     #bdb5a4;   /* texto secundario */
  --andor-muted:     #7a7a7e;
  --andor-dim:       #3a3a3e;

  /* Estados (idénticos en web y CRM) */
  --andor-success:    #4caf7d;
  --andor-success-bg: rgba(76, 175, 125, 0.10);
  --andor-success-bd: rgba(76, 175, 125, 0.40);

  --andor-warning:    #e0a030;
  --andor-warning-bg: rgba(224, 160, 48, 0.10);
  --andor-warning-bd: rgba(224, 160, 48, 0.40);

  --andor-danger:     #e05555;
  --andor-danger-bg:  rgba(224, 85, 85, 0.10);
  --andor-danger-bd:  rgba(224, 85, 85, 0.40);

  --andor-info:       #7aa3d8;
  --andor-info-bg:    rgba(122, 163, 216, 0.10);
  --andor-info-bd:    rgba(122, 163, 216, 0.40);

  /* Acentos de categoría (usados en KPIs del CRM y badges en web) */
  --andor-purple:     #a78bfa;
  --andor-teal:       #34d9c0;
  --andor-orange:     #f4933a;

  /* ═══ Tipografía ══════════════════════════════════════════════════ */
  --andor-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --andor-sans:   'Jost', system-ui, -apple-system, sans-serif;

  /* Escala tipográfica (consistente entre productos) */
  --andor-fs-9:   9px;   /* eyebrow */
  --andor-fs-10:  10px;
  --andor-fs-11:  11px;  /* meta */
  --andor-fs-12:  12px;  /* small */
  --andor-fs-13:  13px;
  --andor-fs-14:  14px;  /* body */
  --andor-fs-15:  15px;
  --andor-fs-16:  16px;
  --andor-fs-18:  18px;  /* h6 */
  --andor-fs-22:  22px;  /* h4 / panel header */
  --andor-fs-28:  28px;  /* h3 */
  --andor-fs-36:  36px;  /* h2 */
  --andor-fs-56:  56px;  /* h1 hero */

  /* Letter-spacing semántico */
  --andor-tracking-tight:  -0.01em;   /* serifs grandes */
  --andor-tracking-normal: 0;
  --andor-tracking-eyebrow: 0.2em;    /* eyebrows uppercase */
  --andor-tracking-button:  0.12em;   /* botones uppercase */

  /* ═══ Espaciado (8px base) ════════════════════════════════════════ */
  --andor-s1:  4px;
  --andor-s2:  8px;
  --andor-s3:  12px;
  --andor-s4:  16px;
  --andor-s5:  20px;
  --andor-s6:  24px;
  --andor-s8:  32px;
  --andor-s10: 40px;
  --andor-s12: 48px;
  --andor-s16: 64px;
  --andor-s20: 80px;

  /* ═══ Radios ═════════════════════════════════════════════════════ */
  --andor-r-sm:   6px;
  --andor-r-md:   10px;
  --andor-r-lg:   14px;
  --andor-r-xl:   20px;
  --andor-r-pill: 999px;

  /* ═══ Sombras ════════════════════════════════════════════════════ */
  --andor-sh-1:   0 1px 2px rgba(0,0,0,0.18);
  --andor-sh-2:   0 4px 12px rgba(0,0,0,0.22);
  --andor-sh-3:   0 12px 32px rgba(0,0,0,0.32);
  --andor-sh-4:   0 24px 60px rgba(0,0,0,0.45);

  /* ═══ Transiciones ═══════════════════════════════════════════════ */
  --andor-t-fast:  120ms cubic-bezier(.4, 0, .2, 1);
  --andor-t-base:  180ms cubic-bezier(.4, 0, .2, 1);
  --andor-t-slow:  280ms cubic-bezier(.4, 0, .2, 1);

  /* ═══ Z-index ════════════════════════════════════════════════════ */
  --andor-z-nav:      100;
  --andor-z-modal:    1000;
  --andor-z-toast:    9100;
  --andor-z-fab:      9000;
}

/* ─── MODO CLARO ─────────────────────────────────────────────────────
   La web pública usa esto durante el día.
   El CRM puede activarlo opcionalmente desde su selector de tema.
*/
[data-theme="light"]{
  --andor-bg:        #FAFAFA;
  --andor-bg-2:      #FFFFFF;
  --andor-bg-3:      #F5F5F5;
  --andor-bg-4:      #EEEEEE;
  --andor-line:      rgba(150, 114, 74, 0.18);
  --andor-line-2:    #E5E5E5;

  /* Roble más oscuro para fondos claros (antes: gold #9B7E3E) */
  --andor-gold:       #96724A;
  --andor-gold-light: #B89060;
  --andor-gold-dark:  #7A5C38;
  --andor-gold-bg:    rgba(150, 114, 74, 0.08);
  --andor-gold-bd:    rgba(150, 114, 74, 0.28);

  /* Cemento para light mode */
  --andor-stone:       #7A7572;
  --andor-stone-light: #9E9A95;
  --andor-stone-dark:  #5C5855;
  --andor-stone-bg:    rgba(122, 117, 114, 0.08);
  --andor-stone-bd:    rgba(122, 117, 114, 0.25);

  --andor-ink:       #1F1F1F;
  --andor-ink-2:     #5A5A5A;
  --andor-muted:     #6A6A6A;
  --andor-dim:       #A0A0A0;

  --andor-success:    #2F8C5C;
  --andor-success-bg: rgba(47, 140, 92, 0.08);
  --andor-success-bd: rgba(47, 140, 92, 0.28);

  --andor-warning:    #B57A1F;
  --andor-warning-bg: rgba(181, 122, 31, 0.08);
  --andor-warning-bd: rgba(181, 122, 31, 0.28);

  --andor-danger:     #B43A3A;
  --andor-danger-bg:  rgba(180, 58, 58, 0.08);
  --andor-danger-bd:  rgba(180, 58, 58, 0.28);

  --andor-info:       #3F6FA0;
  --andor-info-bg:    rgba(63, 111, 160, 0.08);
  --andor-info-bd:    rgba(63, 111, 160, 0.28);

  --andor-purple:     #6F58B8;
  --andor-teal:       #1E8E7C;
  --andor-orange:     #B5611F;
}

/* ─── Utilidades reutilizables ──────────────────────────────────────
   Estas clases son opcionales. La web y el CRM pueden seguir usando
   sus propios estilos, pero quien quiera puede usar estas para
   garantizar consistencia entre productos.
*/

.andor-eyebrow{
  font-family: var(--andor-sans);
  font-size: var(--andor-fs-11);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--andor-tracking-eyebrow);
  color: var(--andor-gold);
}

.andor-h1{
  font-family: var(--andor-serif);
  font-weight: 300;
  font-size: var(--andor-fs-56);
  letter-spacing: var(--andor-tracking-tight);
  line-height: 1.05;
  color: var(--andor-ink);
}
.andor-h1 em{ font-style: italic; color: var(--andor-gold); }

.andor-h2{
  font-family: var(--andor-serif);
  font-weight: 400;
  font-size: var(--andor-fs-36);
  letter-spacing: var(--andor-tracking-tight);
  line-height: 1.15;
  color: var(--andor-ink);
}

.andor-btn-gold{
  font-family: var(--andor-sans);
  font-size: var(--andor-fs-12);
  font-weight: 600;
  letter-spacing: var(--andor-tracking-button);
  text-transform: uppercase;
  padding: var(--andor-s3) var(--andor-s6);
  background: var(--andor-gold);
  color: #0a0a0a;
  border: 1px solid var(--andor-gold);
  border-radius: var(--andor-r-sm);
  cursor: pointer;
  transition: all var(--andor-t-base);
}
.andor-btn-gold:hover{ background: var(--andor-gold-light); }

.andor-btn-line{
  font-family: var(--andor-sans);
  font-size: var(--andor-fs-12);
  font-weight: 500;
  letter-spacing: var(--andor-tracking-button);
  text-transform: uppercase;
  padding: var(--andor-s3) var(--andor-s6);
  background: transparent;
  color: var(--andor-gold);
  border: 1px solid var(--andor-gold);
  border-radius: var(--andor-r-sm);
  cursor: pointer;
  transition: all var(--andor-t-base);
}
.andor-btn-line:hover{
  background: var(--andor-gold);
  color: var(--andor-bg);
}

.andor-tag{
  display: inline-block;
  font-family: var(--andor-sans);
  font-size: var(--andor-fs-10);
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--andor-gold-bg);
  color: var(--andor-gold);
  border: 1px solid var(--andor-gold-bd);
  border-radius: var(--andor-r-pill);
}