/* ============================================================================
   BETO'S AVÁNDARO — Design tokens compartidos
   Versión: 1.0 · 2026-05-17
   Heredan: portal/avandaro, pizza, departamentos, actividades (futuro)
   ============================================================================ */

:root {
  /* ── COLOR PALETTE ───────────────────────────────────────────────────────── */
  /* Rojo Beto's — sampleado del bordado original 1975 */
  --color-red-beto: #CC1822;
  --color-red-deep: #9E0E16;       /* sombras del rojo, gradients */
  --color-red-glow: #E63A45;       /* highlights, hover */

  /* Crema — base cálida, NO blanco puro (calidez textil heritage) */
  --color-cream: #FAF5EC;
  --color-cream-soft: #F3EBDC;     /* surface secundaria */
  --color-cream-warm: #EFE3CD;     /* surface terciaria */

  /* Ink — negro café muy oscuro, no negro plano */
  --color-ink: #1A1410;
  --color-ink-soft: #3A2E25;       /* body text */
  --color-ink-mute: #6B5A4D;       /* secondary text, captions */

  /* Oro envejecido — hilo bordado, acentos premium */
  --color-gold: #B8924A;
  --color-gold-soft: #D4B879;      /* hover, glow */
  --color-gold-deep: #8A6D38;      /* sombra */

  /* Verde bosque — para sitio Departamentos + acentos naturaleza */
  --color-forest: #2F4A33;
  --color-forest-soft: #5A7960;
  --color-forest-mist: #A8B8AC;

  /* Terracota / teja — para acentos cálidos italianos */
  --color-terracota: #B85C3A;
  --color-terracota-soft: #D9856A;

  /* Estado neutral */
  --color-bg: var(--color-cream);
  --color-text: var(--color-ink-soft);
  --color-text-strong: var(--color-ink);
  --color-text-mute: var(--color-ink-mute);
  --color-accent: var(--color-red-beto);
  --color-surface: var(--color-cream-soft);

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────────────── */
  /* Bitter — slab serif chunky, trazos uniformes, sin partes delgadas. Heritage italiano-mexicano */
  --font-display: 'Bitter', Georgia, serif;

  /* Inter — body sans-serif neutral, alta legibilidad */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Caveat — handwritten, taglines editoriales, subtítulos con voz */
  --font-handwritten: 'Caveat', cursive;

  /* --font-accent apunta al handwritten (reemplaza referencia a UnifrakturMaguntia) */
  --font-accent: var(--font-handwritten);

  /* Type scale — clamp(min, fluid, max) para escalar móvil↔desktop */
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);   /* 12-14 */
  --text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);     /* 14-16 */
  --text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);     /* 16-18 */
  --text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.375rem);   /* 18-22 */
  --text-xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);       /* 24-32 */
  --text-2xl: clamp(2rem, 1.5rem + 2.5vw, 3rem);          /* 32-48 */
  --text-3xl: clamp(2.5rem, 1.75rem + 3.75vw, 4.5rem);    /* 40-72 */
  --text-4xl: clamp(3rem, 2rem + 5vw, 6rem);              /* 48-96 */
  --text-hero: clamp(3.5rem, 2.5rem + 5vw, 7rem);         /* 56-112 hero */

  --weight-light: 200;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 900;

  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.05em;
  --tracking-wider: 0.1em;
  --tracking-widest: 0.18em;

  /* ── SPACING — escala 4px base ───────────────────────────────────────────── */
  --space-1: 0.25rem;   /*  4 */
  --space-2: 0.5rem;    /*  8 */
  --space-3: 0.75rem;   /* 12 */
  --space-4: 1rem;      /* 16 */
  --space-5: 1.25rem;   /* 20 */
  --space-6: 1.5rem;    /* 24 */
  --space-8: 2rem;      /* 32 */
  --space-10: 2.5rem;   /* 40 */
  --space-12: 3rem;     /* 48 */
  --space-16: 4rem;     /* 64 */
  --space-20: 5rem;     /* 80 */
  --space-24: 6rem;     /* 96 */
  --space-32: 8rem;     /* 128 */
  --space-section: clamp(4rem, 3rem + 5vw, 8rem);        /* spacing entre secciones */
  --space-section-lg: clamp(6rem, 4rem + 8vw, 12rem);    /* secciones grandes */

  /* ── LAYOUT ──────────────────────────────────────────────────────────────── */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1440px;
  --container-prose: 65ch;
  --container-page: 1280px;

  /* ── BORDERS & RADII ─────────────────────────────────────────────────────── */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --border-hairline: 1px;
  --border-thin: 2px;
  --border-thick: 3px;

  /* ── ELEVATION — sombras multicapa (NO planas) ───────────────────────────── */
  --shadow-sm:
    0 1px 2px rgba(26, 20, 16, 0.06),
    0 1px 3px rgba(26, 20, 16, 0.10);
  --shadow-md:
    0 4px 6px rgba(26, 20, 16, 0.07),
    0 10px 15px rgba(26, 20, 16, 0.10);
  --shadow-lg:
    0 10px 15px rgba(26, 20, 16, 0.10),
    0 20px 40px rgba(26, 20, 16, 0.15);
  --shadow-xl:
    0 20px 25px rgba(26, 20, 16, 0.10),
    0 40px 80px rgba(26, 20, 16, 0.20);
  --shadow-gold:
    0 8px 20px rgba(184, 146, 74, 0.25),
    0 16px 40px rgba(184, 146, 74, 0.15);
  --shadow-red:
    0 8px 20px rgba(204, 24, 34, 0.25),
    0 16px 40px rgba(204, 24, 34, 0.15);

  /* ── MOTION ──────────────────────────────────────────────────────────────── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.83, 0, 0.17, 1);    /* ease-out-quint — exponencial fuerte sin overshoot (migrado de bounce) */
  --duration-fast: 150ms;
  --duration-base: 300ms;
  --duration-slow: 600ms;
  --duration-slower: 1000ms;

  /* ── EFFECTS ─────────────────────────────────────────────────────────────── */
  --blur-sm: blur(4px);
  --blur-md: blur(12px);
  --blur-lg: blur(24px);
  --blur-glass: blur(20px) saturate(1.4);

  /* Glass surface (cards heritage) */
  --glass-bg: rgba(250, 245, 236, 0.65);
  --glass-border: rgba(184, 146, 74, 0.25);
  --glass-bg-dark: rgba(26, 20, 16, 0.55);
  --glass-border-dark: rgba(184, 146, 74, 0.35);

  /* Texture — grain SVG inline (sutil, calidez textil) */
  --texture-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* ── Z-INDEX ─────────────────────────────────────────────────────────────── */
  --z-base: 0;
  --z-raised: 10;
  --z-overlay: 100;
  --z-modal: 1000;
  --z-toast: 2000;
  --z-cursor: 9999;

  /* ── BREAKPOINTS (referencia, no se usan en CSS — son para JS) ──────────── */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
}

/* Reduce motion para accesibilidad */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
    --duration-slower: 0ms;
  }
}