/*
 * AldeOn — Design tokens (base de la modernización visual, 2026-09-07).
 * Solo variables CSS, nada de reglas de componente aquí — las clases
 * reutilizables (grano, glass, etc.) viven en effects.css, que ya las
 * consume desde estas variables.
 *
 * Los colores de marca son los MISMOS que ya usan las 7 landing pages
 * (:root inline de cada una) y la app Flutter — no se inventan nuevos.
 * El logo en sí (public/assets/brand/logo.png) es un verde plano, pero
 * el verde/ámbar/índigo que de verdad identifican la marca en el resto
 * de la web son estos tres (--home, --highlight, --votes) — son los
 * que se han extendido aquí para los degradados "mesh".
 */
:root {
  /* ---------- Marca (idénticos a los :root ya existentes) ---------- */
  --cream: #FCF7EE;
  --sand: #F4ECDD;
  --ink: #2E2A22;
  --ink-soft: #6B6353;

  --home: #1F6B72;
  --home-tint: #DCEAEA;
  --events: #2F7A6B;
  --events-tint: #DCEEE6;
  --economy: #C1572A;
  --economy-tint: #F7E4D6;
  --highlight: #D9A441;
  --highlight-tint: #F8ECD3;
  --votes: #4A4E8C;
  --votes-tint: #E1E3F2;

  /* ---------- Paleta extendida para degradados "mesh" ----------
   * Una versión clara (para manchas de luz) y el triplete RGB (para
   * componer rgba(var(--mesh-x-rgb), 0.NN) con la opacidad que haga
   * falta en cada mancha) de cada uno de los 3 tonos de marca que
   * pidió el usuario como base — verde, ámbar ("amarillo") e índigo
   * ("azul") — más la terracota ya existente como cuarto acento cálido.
   */
  --mesh-green: #1F6B72;
  --mesh-green-rgb: 31, 107, 114;
  --mesh-green-light: #4FA3A8;
  --mesh-green-light-rgb: 79, 163, 168;

  --mesh-amber: #D9A441;
  --mesh-amber-rgb: 217, 164, 65;
  --mesh-amber-light: #F0C878;
  --mesh-amber-light-rgb: 240, 200, 120;

  --mesh-indigo: #4A4E8C;
  --mesh-indigo-rgb: 74, 78, 140;
  --mesh-indigo-light: #7B7FC4;
  --mesh-indigo-light-rgb: 123, 127, 196;

  --mesh-terracotta: #C1572A;
  --mesh-terracotta-rgb: 193, 87, 42;
  --mesh-terracotta-light: #E08A5C;
  --mesh-terracotta-light-rgb: 224, 138, 92;

  /* ---------- Espaciado (base 8px) ---------- */
  --space-3xs: 4px;
  --space-2xs: 8px;
  --space-xs: 12px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-2xl: 64px;
  --space-3xl: 96px;

  /* ---------- Radios (extiende los --radius-lg/-md ya existentes) ---------- */
  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 40px;
  --radius-full: 999px;

  /* ---------- Glass (blur + opacidad, para vidrio esmerilado) ---------- */
  --glass-blur-sm: 8px;
  --glass-blur-md: 16px;
  --glass-blur-lg: 28px;
  --glass-opacity-light: 0.55;
  --glass-opacity-medium: 0.7;
  --glass-opacity-strong: 0.85;
  --glass-border-color: rgba(255, 255, 255, 0.4);

  /* ---------- Grano (usado por .grain-overlay en effects.css) ---------- */
  --grain-opacity: 0.045;
}