/* ==========================================================================
   BASURTO FERMIN CAFE -- Design Tokens
   Paleta, tipografia, espaciado y variables de marca.
   No modificar valores de color sin aprobacion de marca.
   ========================================================================== */

:root {
  /* ---- Color: base de marca ---- */
  --color-charcoal: #111111;   /* negro carbon: logotipo, titulos, botones */
  --color-espresso: #3A2418;   /* cafe espresso: encabezados secundarios */
  --color-toasted:  #68452E;   /* cafe tostado: botones secundarios, etiquetas */
  --color-cream:    #F4F0E7;   /* crema papel: fondo principal */
  --color-ivory:    #FAF8F2;   /* marfil calido: tarjetas y secciones claras */
  --color-forest:   #26372B;   /* verde bosque: acentos de origen */
  --color-olive:    #69705A;   /* verde oliva apagado: detalles secundarios */
  --color-terracotta: #A66A4C; /* terracota suave: pequenos acentos */
  --color-gold:     #B39461;   /* dorado cafe: solo detalles premium, con mesura */

  /* ---- Color: alias semanticos ---- */
  --color-bg: var(--color-cream);
  --color-surface: var(--color-ivory);
  --color-text: var(--color-charcoal);
  --color-text-muted: var(--color-toasted);
  --color-border: rgba(17, 17, 17, 0.12);
  --color-border-strong: var(--color-espresso);
  --color-accent-nature: var(--color-forest);
  --color-link: var(--color-espresso);

  /* ---- Tipografia ---- */
  --font-display: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
  --font-body: "DM Sans", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif: "Cormorant Garamond", "Libre Baskerville", Georgia, serif;

  --tracking-display: 0.04em;
  --tracking-label: 0.18em;

  /* ---- Escala tipografica (fluid, clamp) ---- */
  --fs-hero: clamp(2.8rem, 7vw, 6.4rem);
  --fs-h1: clamp(2.2rem, 5vw, 4rem);
  --fs-h2: clamp(1.8rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.3rem, 2.2vw, 1.9rem);
  --fs-lead: clamp(1.1rem, 1.6vw, 1.4rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.78rem;

  /* ---- Espaciado ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --container-max: 1280px;
  --container-padding: clamp(1.25rem, 4vw, 4rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Sombras (casi imperceptibles) ---- */
  --shadow-card: 0 1px 2px rgba(17, 17, 17, 0.04), 0 8px 24px rgba(17, 17, 17, 0.05);
  --shadow-card-hover: 0 2px 4px rgba(17, 17, 17, 0.06), 0 16px 32px rgba(17, 17, 17, 0.08);
  --shadow-drawer: -12px 0 40px rgba(17, 17, 17, 0.18);

  /* ---- Transiciones ---- */
  --ease-elegant: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 220ms;
  --duration-base: 420ms;
  --duration-slow: 900ms;

  /* ---- Header ---- */
  --header-height: 92px;
  --header-height-scrolled: 72px;

  /* ---- Glassmorphism (filtros, badges y tarjetas sobre fondos con foto/color) ---- */
  --glass-blur: blur(10px) saturate(160%);
  --glass-bg-light: rgba(255, 255, 255, 0.18);
  --glass-bg-light-hover: rgba(255, 255, 255, 0.32);
  --glass-border-light: rgba(255, 255, 255, 0.4);
  --glass-bg-dark: rgba(255, 255, 255, 0.08);
  --glass-bg-dark-hover: rgba(255, 255, 255, 0.14);
  --glass-border-dark: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 2px 10px rgba(17, 17, 17, 0.08);

  /* ---- Z-index scale ---- */
  --z-header: 100;
  --z-drawer: 200;
  --z-modal: 300;
  --z-toast: 400;
}