/* ================================================================
   variables.css — Tokens de diseño — Tema Claro Accesible
   Reciclanet Web 2026
   Cumple WCAG 2.1 nivel AA en ratios de contraste.
================================================================ */

:root {

  /* ── VERDE CORPORATIVO ─────────────────────────────────────── */
  --color-primary:        #27ae60;   /* Verde principal — botones, acentos */
  --color-primary-dark:   #1e8449;   /* Hover de botones verdes */
  --color-primary-light:  #a9dfbf;   /* Verde claro — chips, bordes suaves */
  --color-primary-xlight: #eafaf1;   /* Verde muy claro — fondos de tarjetas */
  --color-primary-bg:     #f0faf4;   /* Fondo verde suavísimo — secciones alternas */

  /* ── BOTÓN TIENDA — Amarillo cálido ───────────────────────── */
  /* Diferente al verde para que destaque y se distinga del resto del navbar.
     Cálido, visible, sin ser agresivo. Contraste texto oscuro sobre él: 8:1 */
  --color-tienda:         #f0b429;   /* Amarillo cálido */
  --color-tienda-dark:    #d49a1a;   /* Hover del botón tienda */
  --color-tienda-text:    #1a1a2a;   /* Texto oscuro sobre amarillo — alto contraste */

  /* ── FONDOS CLAROS ─────────────────────────────────────────── */
  --color-bg-main:        #ffffff;   /* Fondo blanco puro — secciones principales */
  --color-bg-alt:         #f8f9fa;   /* Gris muy suave cálido — secciones alternas */
  --color-bg-alt2:        #f0faf4;   /* Verde suavísimo — secciones destacadas */

  /* ── FONDOS OSCUROS — SOLO footer y elementos puntuales ────── */
  /* REGLA: ninguna sección de contenido puede tener fondo oscuro.
     Solo el footer. El manifiesto ahora usa fondo claro. */
  --color-bg-dark:        #1a2744;   /* Azul marino oscuro — SOLO footer */
  --color-bg-dark2:       #142035;   /* Azul más oscuro — hover footer */

  /* ── TEXTOS ─────────────────────────────────────────────────── */
  --color-text-primary:   #1a1a2a;   /* Casi negro — ratio 16:1 sobre blanco */
  --color-text-secondary: #3d3d52;   /* Gris oscuro — ratio 9:1 sobre blanco */
  --color-text-muted:     #6b6b80;   /* Gris medio — ratio 4.5:1 mínimo AA */
  --color-text-light:     #9b9baf;   /* Gris claro — solo decorativo */

  /* ── BLANCOS (para elementos sobre fondos oscuros) ──────────── */
  --color-white:          #ffffff;
  --color-white-90:       rgba(255,255,255,0.95);
  --color-white-70:       rgba(255,255,255,0.80);
  --color-white-50:       rgba(255,255,255,0.60);
  --color-white-20:       rgba(255,255,255,0.25);
  --color-white-10:       rgba(255,255,255,0.12);

  /* ── BORDES ─────────────────────────────────────────────────── */
  --color-border:         #e0e4ea;   /* Borde estándar claro */
  --color-border-strong:  #c8cdd6;   /* Borde más visible — inputs */
  --color-border-green:   rgba(39,174,96,0.3); /* Borde verde suave */

  /* ── NAVBAR ─────────────────────────────────────────────────── */
  --color-navbar-bg:      #ffffff;
  --color-navbar-border:  #e0e4ea;          /* Borde inferior por defecto */
  --color-navbar-scroll:  var(--color-primary-light); /* Borde verde al hacer scroll */
  --color-navbar-shadow:  0 2px 20px rgba(0,0,0,0.08);

  /* ── ACENTO AZUL/CIAN ───────────────────────────────────────── */
  --color-accent:         #0e86a8;
  --color-accent-light:   #e8f4f8;

  /* ── ESTADOS ────────────────────────────────────────────────── */
  --color-success:        #27ae60;
  --color-success-bg:     #eafaf1;
  --color-error:          #c0392b;
  --color-error-bg:       #fdf0ef;
  --color-warning:        #d68910;
  --color-info:           #1a6ea8;

  /* ── SOMBRAS ────────────────────────────────────────────────── */
  --shadow-sm:       0 1px 4px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:       0 4px 16px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:       0 8px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:       0 16px 48px rgba(0,0,0,0.12), 0 6px 20px rgba(0,0,0,0.07);
  --shadow-green:    0 4px 20px rgba(39,174,96,0.25);
  --shadow-green-lg: 0 8px 32px rgba(39,174,96,0.35);
  --shadow-tienda:   0 4px 16px rgba(240,180,41,0.35); /* Sombra botón tienda */
  --shadow-card:     0 2px 12px rgba(0,0,0,0.07), 0 1px 4px rgba(0,0,0,0.04);

  /* ── TIPOGRAFÍA ─────────────────────────────────────────────── */
  --font-display:  'Syne', sans-serif;      /* Títulos y headings */
  --font-body:     'DM Sans', sans-serif;   /* Texto corrido */
  --font-mono:     'Courier New', monospace;

  /* Escala tipográfica — base fluida con clamp() en main.css */
  --text-xs:    0.833rem;   /* ~13px */
  --text-sm:    0.944rem;   /* ~15px */
  --text-base:  1rem;       /* 16px base */
  --text-lg:    1.125rem;   /* 18px */
  --text-xl:    1.25rem;    /* 20px */
  --text-2xl:   1.5rem;     /* 24px */
  --text-3xl:   1.875rem;   /* 30px */
  --text-4xl:   2.25rem;    /* 36px */
  --text-5xl:   3rem;       /* 48px */
  --text-6xl:   3.75rem;    /* 60px */
  --text-7xl:   4.5rem;     /* 72px */

  --font-light:     300;
  --font-regular:   400;
  --font-medium:    500;
  --font-semibold:  600;
  --font-bold:      700;
  --font-extrabold: 800;

  /* Interlineado — amplio para personas mayores */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.75;
  --leading-loose:  1.9;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ── ESPACIADO ─────────────────────────────────────────────── */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* ── BORDES Y RADIOS ───────────────────────────────────────── */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ── TRANSICIONES ──────────────────────────────────────────── */
  --transition-fast: all 0.15s ease;
  --transition-base: all 0.3s ease;
  --transition-slow: all 0.5s ease;

  /* ── LAYOUT ────────────────────────────────────────────────── */
  --container-max:  1800px;
  --container-px:   1.25rem;

  /* ── NAVBAR ────────────────────────────────────────────────── */
  --navbar-height:         68px;    /* Móvil y tablet */
  --navbar-height-desktop: 76px;    /* Desktop */

  /* ── Z-INDEX ───────────────────────────────────────────────── */
  --z-below:    -1;
  --z-base:      0;
  --z-above:     10;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-toast:     500;

  /* ── GRADIENTES ────────────────────────────────────────────── */
  --gradient-primary:      linear-gradient(135deg, #27ae60 0%, #0e86a8 100%);
  --gradient-primary-soft: linear-gradient(135deg, #eafaf1 0%, #e8f4f8 100%);
  --gradient-green-soft:   linear-gradient(135deg, #eafaf1 0%, #f0faf4 100%);
  --gradient-card:         linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
  --gradient-hero-overlay: linear-gradient(
    180deg,
    rgba(15,20,30,0.72) 0%,
    rgba(15,20,30,0.55) 50%,
    rgba(15,20,30,0.80) 100%
  );
}