/* ============================================
   VARIABLES CSS - DESIGN SYSTEM NUTRIVITE
   Centralización de colores con soporte para Dark Mode
   ============================================ */

:root {
  /* Colores Primarios (Verde) - Light Mode */
  --color-primary: #0BA456;
  --color-primary-50: #E8F8EF;
  --color-primary-100: #D1F1DF;
  --color-primary-200: #A3E3BF;
  --color-primary-300: #75D59F;
  --color-primary-400: #47C77F;
  --color-primary-500: #0BA456;
  --color-primary-600: #098345;
  --color-primary-700: #076234;
  --color-primary-800: #054123;
  --color-primary-900: #022111;

  /* Colores Secundarios (Morado) - Light Mode */
  --color-secondary: #683DED;
  --color-secondary-50: #F5F2FE;
  --color-secondary-100: #E9E3FD;
  --color-secondary-200: #D3C7FB;
  --color-secondary-300: #947BE7;
  --color-secondary-400: #7E5CEF;
  --color-secondary-500: #683DED;
  --color-secondary-600: #5631BE;
  --color-secondary-700: #41258F;
  --color-secondary-800: #2B185F;
  --color-secondary-900: #160C30;

  /* Colores Terciarios (Amarillo) - Light Mode */
  --color-tertiary: #E6B749;

  /* Colores Neutrales (Grises) - Light Mode */
  --color-neutral: #55766A;
  --color-neutral-50: #FFFFFF;
  --color-neutral-100: #F6FAF8;
  --color-neutral-200: #E8EFED;
  --color-neutral-300: #BAC7C3;
  --color-neutral-400: #8E9F99;
  --color-neutral-500: #55766A;
  --color-neutral-600: #415A50;
  --color-neutral-700: #294239;
  --color-neutral-800: #233830;
  --color-neutral-900: #0F1915;

  /* Variables semánticas para fácil uso */
  --color-text-primary: var(--color-neutral-700);
  --color-text-secondary: var(--color-neutral-500);
  --color-background: var(--color-neutral-50);
  --color-surface: var(--color-neutral-100);
  --color-border: var(--color-neutral-300);
}

/* Dark Mode - Se activa cuando se agrega la clase 'dark' al html o body */
.dark {
    /* Colores Primarios - Ajustados para mejor contraste en dark mode */
    --color-primary: #21AE59;
    --color-primary-50: #090F0D;
    --color-primary-100: #072F21;
    --color-primary-200: #0B4732;
    --color-primary-300: #0F5F43;
    --color-primary-400: #18894E;
    --color-primary-500: #21AE59;
    --color-primary-600: #3EC572;
    --color-primary-700: #6AD391;
    --color-primary-800: #96E1B0;
    --color-primary-900: #C3F0CF;
    /* Colores Secundarios para dark mode */
    --color-secondary: #976AFA;
    --color-secondary-50: #1A0E38;
    --color-secondary-100: #281A5A;
    --color-secondary-200: #382881;
    --color-secondary-300: #553AB7;
    --color-secondary-400: #7C5AEC;
    --color-secondary-500: #976AFA;
    --color-secondary-600: #AB8BFB;
    --color-secondary-700: #BEAAFC;
    --color-secondary-800: #D2C9FD;
    --color-secondary-900: #E6E4FE;
    /* Colores Terciarios (Amarillo) para dark mode */
    --color-tertiary: #F3C969;
    /* En dark mode, invertimos la escala de neutrales */
    --color-neutral: #475952;
    --color-neutral-50: #090F0D; /* Casi negro */
    --color-neutral-100: #121C18; /* Gris muy oscuro */
    --color-neutral-200: #192822; /* Gris oscuro */
    --color-neutral-300: #273730; /* Gris medio oscuro */
    --color-neutral-400: #33473F; /* Gris base*/
    --color-neutral-500: #475952; /* Gris medio claro*/
    --color-neutral-600: #6A7873; /* Gris claro*/
    --color-neutral-700: #8C9693; /* Gris muy claro*/
    --color-neutral-800: #CBD0CE; /* Fondo de página*/
    --color-neutral-900: #F5F5F5; /* Blanco puro*/
    /* Variables semánticas ajustadas para dark mode */
    --color-text-primary: var(--color-neutral-700);
    --color-text-secondary: var(--color-neutral-500);
    --color-background: var(--color-neutral-50);
    --color-surface: var(--color-neutral-100);
    --color-border: var(--color-neutral-300);
}