/* =========================================================
   CÚPORA · DESIGN SYSTEM (capa de tokens)
   ---------------------------------------------------------
   Capa ADITIVA. Solo define custom properties (tokens):
   paleta, tipografía, escala, spacing y radios.
   NO contiene selectores que cambien el render existente.
   Se carga DESPUÉS de style.css. Los tokens base
   (--bg-page, --accent, --ink, etc.) se reutilizan vía alias
   para mantener una sola fuente de verdad.
   Documentado en docs/design-system.md
   ========================================================= */

:root {
  /* ---------------------------------------------------------
     1. PALETA — Base (fondos y superficies)  ~70–80%
     --------------------------------------------------------- */
  --cup-cream: var(--bg-page, #fbf6ee);   /* Crema marfil — fondo principal */
  --cup-white-warm: #fffaf3;              /* Blanco cálido — secciones limpias */
  --cup-beige-light: #f5ebdc;             /* Beige claro — bandas suaves */
  --cup-sand: var(--bg-band, #eadcc8);    /* Beige arena — bandas/separadores */
  --cup-card: var(--card, #fbfbfb);       /* Blanco tarjeta */
  --cup-white: #ffffff;                   /* Blanco puro — cards sobre cálido, inputs */
  --cup-card-warm: var(--card-warm, #ffeeda); /* Crema cálido — cards emocionales */
  --cup-cream-extra: #ffeeda;             /* Crema cálido extra */
  --cup-beige-rose: #f4decc;              /* Beige rosado — gradientes */

  /* ---------------------------------------------------------
     2. PALETA — Estructura y confianza (texto, bordes, premium)
     --------------------------------------------------------- */
  --cup-ink-black: #17110b;               /* Negro café — titulares alto contraste, footer */
  --cup-graphite: var(--ink, #2f2f2f);    /* Grafito cálido — texto principal */
  --cup-coffee: #5b3b28;                  /* Café — texto cálido, premium */
  --cup-gold: var(--accent, #8b6f37);     /* Dorado viejo — acento primario */
  --cup-gold-strong: var(--accent-strong, #7f632f); /* Dorado fuerte — hover/énfasis */
  --cup-gold-light: #c7a864;              /* Dorado claro — bordes finos premium */
  --cup-mustard: #ab8115;                 /* Mostaza profunda — detalles, números */

  /* ---------------------------------------------------------
     3. PALETA — Acentos emocionales (cálidos, NO saturar) ~10–15%
     --------------------------------------------------------- */
  --cup-rose: #da8e89;                    /* Rosa terracota — acento emocional principal */
  --cup-blush: #edc2be;                   /* Rosa blush — fondos suaves de acento */
  --cup-peach: #fadbb5;                   /* Durazno crema — gradientes cálidos */
  --cup-orange: #dfa25f;                  /* Naranja medio — detalle artesanal */
  --cup-taupe: #b59a87;                   /* Taupe cálido — texto secundario sobre acento */

  /* ---------------------------------------------------------
     4. PALETA — Highlights puntuales (solo microdetalles) <5%
     --------------------------------------------------------- */
  --cup-coral: #ff5757;                   /* Coral vivo — microinteracciones, atención */
  --cup-wine: #7a1f1f;                    /* Vino/guinda — lujo escaso, estados especiales */

  /* ---------------------------------------------------------
     5. PALETA — Funcionales (estado) — alias a los existentes
     --------------------------------------------------------- */
  --cup-success: var(--success, #2f6b3d);
  --cup-error: var(--error, #c64237);
  --cup-warning: var(--warning, #ff9a00);

  /* Texto auxiliar (alias) */
  --cup-ink-soft: var(--ink-soft, rgba(47, 47, 47, 0.76));
  --cup-ink-muted: var(--ink-muted, rgba(47, 47, 47, 0.62));
  --cup-line: var(--line, rgba(47, 47, 47, 0.14));
  --cup-gold-line: rgba(199, 168, 100, 0.30); /* borde dorado claro premium 30% */

  /* ---------------------------------------------------------
     6. GRADIENTES permitidos (cálidos, artesanales)
     --------------------------------------------------------- */
  --cup-grad-rose-cream: linear-gradient(135deg, #da8e89 0%, #ffeeda 100%);
  --cup-grad-rose-white: linear-gradient(135deg, #da8e89 0%, #ffffff 100%);
  --cup-grad-white-rose: linear-gradient(135deg, #ffffff 0%, #da8e89 100%);
  --cup-grad-beige-cream: linear-gradient(135deg, #f4decc 0%, #ffeeda 100%);
  --cup-grad-cream-white: linear-gradient(135deg, #ffeeda 0%, #ffffff 100%);
  --cup-grad-white-peach: linear-gradient(135deg, #ffffff 0%, #fadbb5 100%);

  /* ---------------------------------------------------------
     7. TIPOGRAFÍA — familias
     --------------------------------------------------------- */
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-serif-alt: 'DM Serif Display', Georgia, serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---------------------------------------------------------
     8. ESCALA TIPOGRÁFICA (responsive con clamp)
     --------------------------------------------------------- */
  --fs-hero: clamp(3.5rem, 6vw, 6rem);     /* 56–96px */
  --fs-h1: clamp(2.75rem, 4.5vw, 4rem);    /* 44–64px */
  --fs-h2: clamp(2rem, 3.2vw, 2.75rem);    /* 32–44px */
  --fs-h3: clamp(1.375rem, 1.8vw, 1.75rem);/* 22–28px */
  --fs-body-lg: clamp(1.125rem, 1.3vw, 1.25rem); /* 18–20px */
  --fs-body: 1rem;                         /* 16px */
  --fs-small: 0.875rem;                    /* 14px */
  --fs-eyebrow: clamp(0.75rem, 0.9vw, 0.8125rem); /* 12–13px */

  --lh-tight: 1.05;   /* titulares */
  --lh-snug: 1.3;     /* subtítulos */
  --lh-body: 1.6;     /* cuerpo */
  --tracking-eyebrow: 0.12em;

  /* ---------------------------------------------------------
     9. SPACING (base 8px)
     --------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 120px;

  --section-pad-y: clamp(64px, 8vw, 120px);
  --card-gap: 24px;
  --card-pad: clamp(24px, 3vw, 32px);
  --card-pad-premium: clamp(28px, 3.2vw, 40px);

  /* ---------------------------------------------------------
     10. RADIOS DE BORDE (los grandes ya existen; añadimos faltantes)
     --------------------------------------------------------- */
  --radius-input: 16px;       /* inputs, selects, textareas */
  --radius-card-sm: 22px;     /* cards pequeñas, pills de info */
  /* --radius-card: 36px      ya en style.css */
  /* --radius-large: 44px     ya en style.css */
  /* --radius-pill: 999px     ya en style.css */
  --radius-section-xl: clamp(30px, 3vw, 58px); /* secciones premium */

  /* ---------------------------------------------------------
     11. SOMBRAS (alias + variante cálida con intención)
     --------------------------------------------------------- */
  --shadow-soft-warm: 0 18px 40px rgba(91, 59, 40, 0.10);
  --shadow-card-warm: 0 16px 34px rgba(91, 59, 40, 0.12);
}