/* ============================================================
   IBIZZI · variables.css
   Design tokens globales de la tienda.
   Cambiar cualquier color / tamaño / transición aquí.
   ============================================================ */

:root {
  /* ---------- Paleta ---------- */
  --color-bg-primary:    #1A1A1A;   /* Fondo principal */
  --color-bg-secondary:  #242424;   /* Fondo carbón secundario */
  --color-bg-card:       #2D2D2D;   /* Tarjetas */
  --color-bg-deep:       #101010;   /* Negro profundo (footer, overlays) */

  --color-text-primary:   #F5F5F5;  /* Texto principal */
  --color-text-secondary: #C7C7C7;  /* Texto secundario */
  --color-text-muted:     #8A8A8A;  /* Etiquetas, meta */
  --color-text-inverse:   #171717;  /* Texto sobre botones claros */

  --color-border:        #444444;   /* Bordes */
  --color-border-soft:   #333333;   /* Bordes suaves */
  --color-border-light:  #D8D8D8;   /* Bordes botón secundario */

  --color-accent:        #F5F5F5;   /* Acento (botón principal) */
  --color-success:       #7CB88E;
  --color-warning:       #E0B67A;
  --color-error:         #C97B7B;

  /* Gradiente de fondo (leve, editorial) */
  --gradient-bg: linear-gradient(
    135deg,
    #171717 0%,
    #202020 45%,
    #2A2A2A 100%
  );

  /* Gradiente para hero (más contraste editorial) */
  --gradient-hero: linear-gradient(
    180deg,
    #10162A 0%,
    #1B2340 60%,
    #232C50 100%
  );

  /* Azul marino de marca (mismo tono que el logo de Instagram @ibizzi.uy),
     usado en los overlays de hero y banner editorial para que esas
     secciones se identifiquen con la marca. */
  --color-brand-navy: #1B2340;

  /* ---------- Tipografía ---------- */
  --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-sans:  'Inter', 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Escala tipográfica (mobile-first, escala en responsive.css) */
  --fs-xs:    0.75rem;    /* 12px */
  --fs-sm:    0.8125rem;  /* 13px */
  --fs-base:  0.9375rem;  /* 15px */
  --fs-md:    1rem;       /* 16px */
  --fs-lg:    1.125rem;   /* 18px */
  --fs-xl:    1.375rem;   /* 22px */
  --fs-2xl:   1.75rem;    /* 28px */
  --fs-3xl:   2.25rem;    /* 36px */
  --fs-4xl:   3rem;       /* 48px */
  --fs-hero:  2.5rem;     /* 40px — escala en tablet/desktop */

  --lh-tight:  1.15;
  --lh-snug:   1.3;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;
  --ls-wider:  0.16em;    /* labels y CTAs mayúsculas */

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ---------- Espaciado ---------- */
  --space-1:  0.25rem;   /* 4  */
  --space-2:  0.5rem;    /* 8  */
  --space-3:  0.75rem;   /* 12 */
  --space-4:  1rem;      /* 16 */
  --space-5:  1.5rem;    /* 24 */
  --space-6:  2rem;      /* 32 */
  --space-7:  3rem;      /* 48 */
  --space-8:  4rem;      /* 64 */
  --space-9:  6rem;      /* 96 */

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad: 1.25rem;         /* padding lateral en móvil */
  --container-pad-lg: 2.5rem;       /* padding lateral en desktop */
  --header-height: 64px;            /* móvil */
  --header-height-lg: 80px;         /* desktop */
  --announcement-height: 34px;

  /* ---------- Bordes / radios ---------- */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;   /* uso raro — la marca es cuadrada */
  --radius-full: 9999px;

  /* ---------- Sombras (muy sutiles) ---------- */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.15);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.35);

  /* ---------- Transiciones ---------- */
  --ease-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:     150ms;
  --dur-base:     250ms;
  --dur-slow:     400ms;
  --dur-slower:   600ms;

  --transition-base: all var(--dur-base) var(--ease-out);
  --transition-color: color var(--dur-fast) var(--ease-out),
                      background-color var(--dur-fast) var(--ease-out),
                      border-color var(--dur-fast) var(--ease-out);

  /* ---------- Z-index ---------- */
  --z-base:       1;
  --z-sticky:     100;
  --z-header:     500;
  --z-overlay:    900;
  --z-drawer:     1000;
  --z-modal:      1100;
  --z-toast:      1200;

  /* ---------- Botones ---------- */
  --btn-height:      52px;
  --btn-height-sm:   40px;
  --btn-pad-x:       1.75rem;
}