/* ==========================================================================
   JESUS RECICLA - DESIGN SYSTEM
   Paleta: Verde Lima, Azul Corporativo, Verde Oscuro (TEMA CLARO DEFINITIVO)
   ========================================================================== */
:root {
    /* Tipografía Corporativa y Editorial */
    --font-primary: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-heading: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Acento Primario: Verde Lima (Logo) */
    --color-primary: #8CC63F;
    --color-primary-hover: #7bb235;
    --color-primary-dark: #2C7B38; /* Verde Oscuro del Logo */
    --color-primary-light: rgba(140, 198, 63, 0.15);
    --color-primary-border: rgba(140, 198, 63, 0.3);
    
    /* Acento Secundario: Azul (Logo) */
    --color-secondary: #2472BA;
    --color-secondary-hover: #1b5b99;
    --color-secondary-light: rgba(36, 114, 186, 0.15);
    --color-secondary-border: rgba(36, 114, 186, 0.3);

    /* Acentos Complementarios */
    --color-accent: #2C7B38;           /* Verde Oscuro del Logo */
    --color-danger: #ef4444;           /* Alerta */

    /* Fondos: CLAROS basados en la paleta */
    --color-bg: #ffffff;               /* Fondo Base Blanco */
    --color-bg-alt: #f4f7f4;           /* Gris/Verde muy claro para contraste */
    --color-surface: #ffffff;          /* Superficies de Tarjetas */
    --color-surface-hover: #f9fbf9;    /* Hover de Superficies */
    --color-card-bg: #ffffff;          /* Tarjetas con profundidad */
    
    /* Textos & Jerarquía Visual (Para fondos claros) */
    --color-text: #1a231b;             /* Verde/Gris muy oscuro casi negro */
    --color-text-muted: #536b56;       /* Verde grisáceo para subtítulos */
    --color-text-dim: #7f9983;         /* Muted Secundario */
    
    /* Bordes & Sombras Cinemáticas para Modo Claro 3D */
    --color-border: rgba(44, 123, 56, 0.12);
    --color-border-subtle: rgba(44, 123, 56, 0.06);
    
    --shadow-sm: 0 2px 5px rgba(44, 123, 56, 0.06);
    --shadow-md: 0 6px 16px rgba(44, 123, 56, 0.1);
    --shadow-lg: 0 12px 32px rgba(44, 123, 56, 0.12);
    --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.05);
    
    /* Sombras 3D Avanzadas (Hover, Neumorphism y Botones) */
    --shadow-3d-idle: 0 15px 35px rgba(44, 123, 56, 0.08), 0 5px 15px rgba(0, 0, 0, 0.03), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    --shadow-3d-hover: 0 25px 50px rgba(44, 123, 56, 0.15), 0 10px 25px rgba(0, 0, 0, 0.06), inset 0 1px 1px rgba(255, 255, 255, 0.9);
    --shadow-btn-primary: 0 6px 0 #6c9c2e, 0 8px 20px rgba(140, 198, 63, 0.4);
    --shadow-btn-primary-active: 0 2px 0 #6c9c2e, 0 4px 10px rgba(140, 198, 63, 0.4);
    
    --shadow-btn-pro: 0 6px 0 #1b5b99, 0 8px 20px rgba(36, 114, 186, 0.4);
    --shadow-btn-pro-active: 0 2px 0 #1b5b99, 0 4px 10px rgba(36, 114, 186, 0.4);

    --shadow-glow: 0 0 45px rgba(140, 198, 63, 0.3); /* Brillo verde lima 3D */

    /* Radios de Esquina Suaves */
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Transiciones */
    --transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}