/* ============================================================================
 * RAQUEL TORRES SPA · Design Tokens
 * Versión: 2.0 · Alineada con la identidad corporativa real (mayo 2026)
 * Paleta derivada de la fachada: cream stucco + verde oliva + nogal + ámbar
 * ============================================================================
 *
 * USO: importa este archivo en cualquier hoja de estilos. Todos los valores
 * de la web y del catálogo iPad consumen estas variables. NO hardcodear
 * colores, tamaños o espaciados en componentes — usar siempre tokens.
 *
 * Cambios vs. v1.0 (2026-05-10 mañana):
 *   · Acento principal: bronce → verde oliva (color del logo).
 *   · Tipografía display: Georgia italic → sans-serif moderna (como el logo).
 *   · Acento cálido: vino → ámbar (luz del halo del logo).
 *   · Marrón secundario: bronce dorado → nogal (carpinterías reales).
 * ============================================================================ */

:root {
  /* ───────── COLORES · PALETA BASE ───────── */
  /* Inspiración directa: fachada Spa Raquel Torres en casco antiguo de Talavera.
     Cada token está justificado por un elemento visible en la identidad real. */

  /* Cream stucco · paredes texturizadas de la fachada */
  --color-cream-50:  #FBF6EC;   /* Halo más cálido · cards en reposo */
  --color-cream-100: #F2E8D5;   /* Fondo principal de página · stucco claro */
  --color-cream-200: #E8DCC4;   /* Fondo elementos elevados · stucco medio */
  --color-cream-300: #D9C9A8;   /* Borde sutil · stucco oscuro */
  --color-cream-400: #C4B08C;   /* Borde marcado */

  /* Verde oliva · color del logo "Spa Raquel Torres" y "ESTÉTICA NATURAL" */
  --color-olive-900: #2A3220;   /* Texto sobre cream · máximo contraste */
  --color-olive-800: #3F4A2E;   /* Color del logo · acento principal */
  --color-olive-700: #4F5C39;
  --color-olive-600: #5C6E45;   /* Plantas / hiedra de la fachada */
  --color-olive-500: #6F8252;
  --color-olive-300: #A8B68F;   /* Verde claro · ambiente */

  /* Nogal · carpinterías de madera de la fachada */
  --color-walnut-900: #2A1C12;
  --color-walnut-800: #3D2918;  /* Marcos de ventanas */
  --color-walnut-700: #5A3E26;
  --color-walnut-500: #7D5A3D;  /* Texto auxiliar cálido */

  /* Ámbar dorado · luz del halo del logo */
  --color-amber-700: #B8843D;
  --color-amber-600: #D4A05A;
  --color-amber-500: #E8B66E;   /* Halo cálido · CTAs especiales */
  --color-amber-300: #F2D4A0;   /* Glow suave */

  /* Tierra (texto) · derivados del nogal y oliva oscura */
  --color-stone-900: #2A2520;   /* Texto principal · alto contraste */
  --color-stone-700: #4A3F35;   /* Texto secundario */
  --color-stone-500: #6B5E54;   /* Texto auxiliar · meta */
  --color-stone-400: #8B7E72;   /* Texto deshabilitado */

  /* Acentos por categoría · todos derivados de la paleta natural */
  --color-cat-premium:  #4F2A2D;   /* Vino profundo · exclusividad */
  --color-cat-deluxe:   #5C6E45;   /* Verde planta · rituales sensoriales */
  --color-cat-masajes:  #5A3E26;   /* Nogal · trabajo manual */
  --color-cat-faciales: #8B5A4E;   /* Terracota suave · piel */
  --color-cat-corp:     #6F8252;   /* Verde oliva claro · cuerpo */
  --color-cat-energ:    #4F5C39;   /* Oliva oscuro · energía */
  --color-cat-jacuzzi:  #4A6B7D;   /* Azul agua templada */
  --color-cat-belleza:  #B8843D;   /* Ámbar · belleza visible */
  --color-cat-depil:    #7D5A3D;   /* Nogal claro */
  --color-cat-micro:    #6B4A5C;   /* Vino apagado */
  --color-cat-grupo:    #A8543D;   /* Terracota cálida · celebración */

  /* Semánticos */
  --color-success:    var(--color-olive-600);
  --color-warning:    var(--color-amber-700);
  --color-error:      #A8463E;
  --color-info:       var(--color-cat-jacuzzi);

  /* ───────── ALIAS SEMÁNTICOS ───────── */
  /* Los componentes consumen estos alias, no los colores base. */

  --bg-page:          var(--color-cream-100);
  --bg-surface:       var(--color-cream-50);
  --bg-elevated:      #FFFFFF;
  --bg-warm-glow:     radial-gradient(circle at center, var(--color-amber-300) 0%, transparent 70%);
  --bg-overlay:       rgba(42, 28, 18, 0.55);

  --text-primary:     var(--color-olive-900);
  --text-secondary:   var(--color-stone-700);
  --text-muted:       var(--color-stone-500);
  --text-on-accent:   var(--color-cream-50);
  --text-on-dark:     var(--color-cream-100);

  --border-subtle:    var(--color-cream-300);
  --border-strong:    var(--color-cream-400);

  --accent-primary:   var(--color-olive-800);   /* Verde logo — el acento principal */
  --accent-secondary: var(--color-walnut-700);  /* Nogal — acento natural */
  --accent-warm:      var(--color-amber-600);   /* Ámbar — luz, destellos */
  --accent-soft:      var(--color-olive-300);

  /* ───────── TIPOGRAFÍA ───────── */
  /* Sin dependencias externas. Display sans-serif alineada con el logo
     (que es una sans pesada estilo Avenir/Gotham). Sin itálicas — la marca
     real NO usa serifs ni cursivas. */

  --font-display:     "Avenir Next", "Avenir", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-body:        -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
  --font-accent:      "Avenir Next", "Avenir", "Helvetica Neue", system-ui, sans-serif;
  --font-mono:        "SF Mono", "Monaco", "Consolas", monospace;

  /* Escala tipográfica · 1.25 ratio (major third) */
  --text-xs:    0.75rem;     /* 12px — meta, labels */
  --text-sm:    0.875rem;    /* 14px — body small */
  --text-base:  1rem;        /* 16px — body */
  --text-md:    1.125rem;    /* 18px — body large */
  --text-lg:    1.375rem;    /* 22px — h4 */
  --text-xl:    1.75rem;     /* 28px — h3 */
  --text-2xl:   2.25rem;     /* 36px — h2 */
  --text-3xl:   2.875rem;    /* 46px — h1 */
  --text-4xl:   3.75rem;     /* 60px — hero */

  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* Letter-spacing inspirado en "ESTÉTICA NATURAL" del rótulo:
     ancho generoso para títulos display. */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide:  0.04em;
  --tracking-wider: 0.12em;
  --tracking-display: 0.18em;   /* Para "ESTÉTICA NATURAL" tipo */

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

  /* ───────── ESPACIADO ───────── */
  --space-0:   0;
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.5rem;
  --space-6:   2rem;
  --space-7:   2.5rem;
  --space-8:   3rem;
  --space-9:   4rem;
  --space-10:  5rem;
  --space-11:  7rem;
  --space-12:  9rem;

  /* ───────── RADIOS ───────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  --border-width: 1px;
  --border-width-strong: 2px;

  /* ───────── SOMBRAS ───────── */
  /* Sombras cálidas, tinte ámbar — coherente con la luz del spa. */
  --shadow-sm:  0 1px 2px rgba(74, 51, 26, 0.06);
  --shadow-md:  0 2px 8px rgba(74, 51, 26, 0.08), 0 1px 2px rgba(74, 51, 26, 0.04);
  --shadow-lg:  0 8px 24px rgba(74, 51, 26, 0.12), 0 2px 6px rgba(74, 51, 26, 0.06);
  --shadow-xl:  0 16px 48px rgba(74, 51, 26, 0.18);
  --shadow-glow: 0 0 40px rgba(232, 182, 110, 0.35);  /* Halo ámbar */

  /* ───────── MOTION ───────── */
  --duration-instant: 100ms;
  --duration-fast:    200ms;
  --duration-base:    320ms;
  --duration-slow:    500ms;
  --duration-slower:  800ms;

  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spa:    cubic-bezier(0.16, 1, 0.3, 1);

  /* ───────── TAMAÑOS DE TOQUE (iPad) ───────── */
  --tap-target-min:   44px;
  --tap-target-comfy: 56px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 0ms;
    --duration-fast:    0ms;
    --duration-base:    0ms;
    --duration-slow:    0ms;
    --duration-slower:  0ms;
  }
}