/** css/variables.css
 * ============================================================
 *  LA FLOR — VARIABLES.CSS
 *
 *  Archivo de tokens de diseño y estilos base globales.
 *  Define la "identidad visual" del proyecto: colores, fuentes,
 *  espaciados, bordes, sombras, transiciones y el reset general.
 *
 *  📚 ÍNDICE
 *  1. IMPORTS         → Tipografías de Google Fonts
 *  2. TOKENS          → Variables CSS (:root)
 *     2.1 Paleta de colores
 *     2.2 Tipografía
 *     2.3 Espaciados (gaps)
 *     2.4 Bordes (radius)
 *     2.5 Sombras
 *     2.6 Transiciones
 *     2.7 Layout (navbar, etc.)
 *  3. RESET           → Normalización de márgenes/paddings/borders
 *  4. BASE GLOBAL     → html, body, fuente, color de fondo
 *  5. ELEMENTOS BASE  → img, a, ul, button, input
 *  6. SCROLLBAR       → Personalización de la barra de scroll
 *
 *  ⚠️  Este archivo debe cargarse PRIMERO en todos los HTML.
 *      Las variables aquí definidas son usadas por components.css
 *      y layout.css.
 * ============================================================
 */


/* ============================================================
   1. IMPORTS — Tipografías
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Nunito:wght@300;400;600;700&display=swap');


/* ============================================================
   2. TOKENS — Variables globales del sistema de diseño
   ============================================================ */
:root {

  /* ── 2.1 Paleta de colores ─────────────────────────────────
     Vino profundo (marca) + dorado trigo (acento) + crema marfil */
  --color-primary:     #7B2D2D;   /* vino tinto — botones, links, énfasis  */
  --color-primary-dk:  #5A1A1A;   /* vino oscuro — hover, gradientes        */
  --color-primary-lt:  #A84444;   /* vino claro — hover suave               */
  --color-accent:      #D4A843;   /* dorado trigo — CTA secundario, badges  */
  --color-accent-lt:   #F0C96A;   /* dorado claro — hover, highlights       */
  --color-cream:       #FAF3E8;   /* fondo principal de la web              */
  --color-cream-dk:    #EDE0C8;   /* fondo de inputs, separadores           */
  --color-dark:        #1E1209;   /* marrón casi negro — títulos fuertes    */
  --color-text:        #3A2010;   /* texto principal                        */
  --color-text-lt:     #7A5C3A;   /* texto secundario / labels              */
  --color-white:       #FFFFFF;   /* tarjetas, modales                      */
  --color-success:     #4CAF50;   /* verde — éxitos, descuentos             */
  --color-danger:      #E53935;   /* rojo — errores, eliminar               */

  /* ── 2.2 Tipografía ────────────────────────────────────────
     Display = títulos grandes / Body = texto y UI */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'Nunito', sans-serif;

  /* ── 2.3 Espaciados (gaps) ─────────────────────────────────
     Sistema de 4/8/16/32/64 píxeles */
  --gap-xs:  4px;
  --gap-sm:  8px;
  --gap-md:  16px;
  --gap-lg:  32px;
  --gap-xl:  64px;

  /* ── 2.4 Bordes (radius) ───────────────────────────────────
     De pequeño (inputs) a píldora (botones redondos) */
  --radius-sm:    6px;
  --radius-md:   14px;
  --radius-lg:   28px;
  --radius-pill: 999px;

  /* ── 2.5 Sombras ───────────────────────────────────────────
     De sutil (cards en reposo) a fuerte (modales, hover) */
  --shadow-sm: 0 2px 8px   rgba(123,45,45,0.10);
  --shadow-md: 0 6px 24px  rgba(123,45,45,0.15);
  --shadow-lg: 0 16px 48px rgba(123,45,45,0.20);

  /* ── 2.6 Transiciones ──────────────────────────────────────
     Duración estándar para animaciones */
  --tr-fast:   0.15s ease;
  --tr-normal: 0.28s ease;
  --tr-slow:   0.5s  ease;

  /* ── 2.7 Layout ────────────────────────────────────────────
     Valores estructurales compartidos */
  --nav-h: 70px;  /* altura fija del navbar — afecta padding-top de páginas */
}


/* ============================================================
   3. RESET — Normalización entre navegadores
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ============================================================
   4. BASE GLOBAL — html y body
   ============================================================ */
html {
  scroll-behavior: smooth;   /* scroll suave en navegación interna */
  font-size: 16px;           /* base de los rem (1rem = 16px)      */
}

body {
  font-family: var(--font-body);
  background:  var(--color-cream);
  color:       var(--color-text);
  line-height: 1.6;
  min-height:  100vh;
}


/* ============================================================
   5. ELEMENTOS BASE — defaults para elementos HTML comunes
   ============================================================ */
img    { display: block; max-width: 100%; object-fit: cover; }
a      { text-decoration: none; color: inherit; }
ul     { list-style: none; }
button { cursor: pointer; font-family: var(--font-body); border: none; background: none; }
input, select, textarea { font-family: var(--font-body); }


/* ============================================================
   6. SCROLLBAR — Barra de scroll personalizada
   ============================================================ */
::-webkit-scrollbar       { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-cream-dk); }
::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: var(--radius-pill);
}