/* ============================================================
   ROMMANEL ECUADOR — Design Tokens
   Paleta D "Pure Minimal" — canónica, no improvisar.
   ============================================================ */

:root {
  /* ---- Color: "Teal Turquesa" — hex oficial confirmado por el cliente ---- */
  --color-turquoise: #00B3BA;      /* dominante: turquesa oficial del logo (Jehan 2026-11-06) */
  --color-turquoise-rgb: 0, 179, 186;
  --color-white: #FFFFFF;          /* base / contraste */
  --color-gold: #D4A017;           /* acento puntual, nunca dominante */
  --color-gold-rgb: 212, 160, 23;
  --color-pearl: #EAFBFB;
  --color-cream: #FAF7F2;          /* fondo cálido editorial (portada y secciones de moda) */
  --color-gold-deep: #8F6E1F;      /* filete fino para dar definición al texto dorado sobre blanco (ruleta, 50%) */
  --color-gold-soft: #C9A84C;      /* dorado fino para filetes y detalles */          /* fondo secundario, con matiz teal turquesa */
  --color-teal-dark: #017A7D;      /* misma familia de tono que el turquesa dominante, solo más oscuro */
  --color-teal-deep: #004D4F;      /* teal profundo de la ruleta (casilla del 50%, textos sobre turquesa) */
  --color-turquoise-light: #A8EBEC; /* turquesa claro, tercer tono de la ruleta */
  --color-gold-light: #F3E4B4;     /* brillo del metal dorado (aro y puntero de la ruleta) */
  --color-turquoise-border: rgba(0, 179, 186, 0.28); /* bordes/acentos gráficos */

  /* Ink — texto de cuerpo, no forma parte de la paleta de marca */
  --color-ink: #1C2321;
  --color-ink-soft: #4A5452;
  --color-error: #8B2635;          /* rojo vino sobrio: solo para errores de formulario */
  --color-error-soft: #F7E9EB;     /* fondo suave del aviso rojo (validador: usado, vencido, en pago online) */
  --color-ok-soft: rgba(0, 179, 186, 0.12); /* fondo suave del aviso turquesa (validador: vigente) */
  --color-field-border: #7A8A88;   /* borde de campos de formulario, 3,6:1 sobre blanco */
  --color-ink-on-turquoise: #FFFFFF;
  --color-ink-on-dark: #F7F7F7;

  /* Semantic surfaces */
  --surface-primary: var(--color-white);
  --surface-secondary: var(--color-pearl);
  --surface-accent: var(--color-turquoise);
  --surface-accent-dark: var(--color-teal-dark);

  /* ---- Typography ---- */
  --font-display: 'Playfair Display', 'Georgia', serif;
  --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;

  --fs-hero: clamp(2.75rem, 3.5vw + 1.5rem, 5.75rem);
  --fs-h1: clamp(2.25rem, 2.2vw + 1.5rem, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.4vw + 1.25rem, 2.75rem);
  --fs-h3: clamp(1.375rem, 0.8vw + 1.1rem, 1.875rem);
  /* Letra más grande (BRIEF-LETRA.md, Jehan 2026-11-07): público 30+. Nada visible
     por debajo de 15 px: --fs-eyebrow y --fs-mini son el piso (15 px). */
  --fs-lead: clamp(1.25rem, 0.4vw + 1.125rem, 1.375rem);   /* 20-22 px: cursivas tipo manifesto/lead */
  --fs-body: 1.0625rem;            /* 17 px en celular; 18 px desde 1024 px (abajo) */
  --fs-small: 1rem;                /* 16 px */
  --fs-eyebrow: 0.9375rem;         /* 15 px */

  --lh-tight: 1.15;
  --lh-heading: 1.25;
  --lh-body: 1.6;

  --ls-eyebrow: 0.18em;
  --ls-eyebrow-sm: 0.1em;          /* celular: etiquetas en mayúscula en 1 línea (Atelier 2026-11-07) */
  --ls-heading: 0.01em;

  /* ---- Spacing scale (generosa, monumental) ---- */
  --space-1: 0.5rem;   /* 8px */
  --space-2: 1rem;     /* 16px */
  --space-3: 1.5rem;   /* 24px */
  --space-4: 2rem;     /* 32px */
  --space-5: 3rem;     /* 48px */
  --space-6: 4rem;     /* 64px */
  --space-7: 6rem;     /* 96px */
  --space-8: 8rem;     /* 128px */

  /* ---- Radius — mínimo, silueta editorial ---- */
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease-signature: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-micro: 200ms;
  --duration-reveal: 700ms;
  --duration-hero: 1100ms;

  /* ---- Layout ---- */
  --container-max: 1360px;
  --container-narrow: 880px;
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Z-index scale ---- */
  --z-nav: 100;
  --z-float: 90;
  --z-overlay: 1000;
  --carrito-ancho: 420px;          /* panel lateral del carrito en escritorio (en celular, 100%) */
  --duration-panel: 250ms;
  --color-overlay: rgba(28, 35, 33, 0.55); /* fondo oscuro detrás del panel del carrito */
  --fs-mini: 0.9375rem;            /* 15 px, el piso: número del icono del carrito, código de pieza, material */
  --fs-icono: 1.375rem;            /* ×, −, + del carrito */         /* entrada del panel del carrito */

  /* ---- Shadow — discreta, nunca decorativa ---- */
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(28, 35, 33, 0.06);
  --shadow-float: 0 6px 20px rgba(1, 122, 125, 0.28);
}

@media (min-width: 1024px) {
  :root {
    --fs-body: 1.125rem;           /* 18 px en computadora */
    --space-7: 7.5rem;
    --space-8: 10rem;
  }
}