/* =========================================================
   Renta de Trajes Leo — Variables de marca
   Paleta aprobada por el cliente (guia-desarrollo-suitrental.pdf):
   NEGRO, BLANCO y DORADO. Sin colores llamativos.
   El negro es el color estructural/base (headers, botones sólidos,
   fondos oscuros); el dorado es acento (líneas, hover, detalles);
   el blanco es el fondo principal.
   ========================================================= */

:root {
  /* --- Color: base (negro / blanco, según brief del cliente) --- */
  --color-black: #0a0a0a;        /* negro, fondos oscuros y botones sólidos */
  --color-black-soft: #1c1c1c;   /* variante para capas sobre negro */
  --color-white: #f8f7f4;        /* blanco hueso, fondo base */
  --color-white-dim: #eeece7;    /* blanco hueso, un paso más oscuro */

  /* --- Color: acento estructural secundario (antes "teal") ---
     Se conserva el nombre de variable por compatibilidad con el CSS
     existente (btn--teal-outline, etc.), pero ahora apunta al dorado,
     tal como pide el brief: dorado como único acento de color. */
  --color-teal: var(--color-gold);
  --color-teal-deep: var(--color-gold-deep);
  --color-teal-faint: var(--color-gold-faint);

  /* --- Color: dorado (acento, línea de marca) --- */
  --color-gold: #c9a66b;         /* dorado envejecido, líneas / hover */
  --color-gold-deep: #b8965a;    /* dorado mate, detalle puntual */
  --color-gold-faint: rgba(201, 166, 107, 0.2); /* veladuras sutiles */

  /* --- Color: neutros intermedios (grises neutros, sin tinte azul) --- */
  --color-stone: #e3e1dc;        /* gris cálido neutro, separador de secciones */
  --color-stone-dark: #bcb9b2;   /* gris cálido neutro, bordes / placeholders */
  --color-ink: #141414;          /* texto principal sobre blanco (casi negro) */
  --color-ink-soft: #2e2e2c;     /* texto secundario / muted — oscurecido para cumplir AA+ sobre fondos hueso */
  --color-ink-invert: #f4f3ef;   /* texto principal sobre negro */
  --color-ink-invert-soft: #ccc9c0; /* texto secundario sobre negro — aclarado para mejor contraste */

  /* --- Tipografía: una sola familia, jerarquía por peso --- */
  --font-brand: "General Sans", "Helvetica Neue", Arial, sans-serif;

  --weight-light: 400;
  --weight-regular: 500;
  --weight-medium: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;   /* H1 hero */
  --tracking-normal: 0;
  --tracking-wide: 0.08em;     /* H2 de sección, eyebrows */
  --tracking-wider: 0.16em;    /* navegación, botones, mayúsculas pequeñas */

  --leading-body: 1.6;
  --leading-tight: 1.1;

  /* --- Escala tipográfica fluida --- */
  --fs-hero: clamp(2.6rem, 6vw, 5rem);
  --fs-h2: clamp(1.4rem, 2.4vw, 2rem);
  --fs-h3: clamp(1.1rem, 1.6vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: 0.85rem;
  --fs-nav: 0.78rem;

  /* --- Layout --- */
  --container-max: 1280px;
  --section-pad-y: clamp(3rem, 7vw, 6rem);
  --section-pad-x: clamp(1.25rem, 5vw, 4rem);
  --radius-soft: 2px; /* casi sin border-radius: look editorial, no SaaS */

  /* --- Transiciones --- */
  --ease-editorial: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-base: 320ms;

  /* --- Variables de compatibilidad — usadas en sucursal.html ----------
     Mapean a la paleta oficial para que no haya fallbacks hardcoded.  */
  --color-surface:      var(--color-white);      /* antes fallback #fff        */
  --color-stone-light:  #f4f2ee;                 /* blanco-hueso un tono más   */
  --color-danger:       #8a2222;                 /* rojo editorial, no Bootstrap */
  --color-muted:        var(--color-ink-soft);   /* antes fallback #666        */
  --color-border:       var(--color-stone);      /* antes fallback #ddd/#e5e7eb */
}