:root {
  /* ==========================================================================
     NIVEL 1: GLOBAL TOKENS (Primitivos)
     ========================================================================== */
  
  /* 1.1 Colores Base (Paletas) */
  --color-green-200: #BFEDA9;
  --color-green-300: #97DF77;
  --color-green-500: #4FAA2C; /* Verde XHOST */
  --color-green-700: #3E8F21;

  --color-blue-900: #060840; /* Azul Profundo */

  --color-gray-50: #F8F9FA;
  --color-gray-100: #F1F3F5;
  --color-gray-200: #E9ECEF;
  --color-gray-300: #DEE2E6;
  --color-gray-400: #CED4DA;
  --color-gray-500: #ADB5BD;
  --color-gray-600: #868E96;
  --color-gray-700: #495057;
  --color-gray-800: #343A40;
  --color-gray-900: #212529;

  --color-red-500: #DC3545;
  --color-yellow-500: #FFC107;
  --color-blue-info-500: #17A2B8;
  --color-white: #FFFFFF;
  --color-transparent-red-300: rgba(220, 53, 69, 0.3);

  /* 1.2 Espaciado y Tamaños (Primitivos) */
  --size-4: 0.25rem;
  --size-8: 0.5rem;
  --size-12: 0.75rem;
  --size-16: 1rem;
  --size-20: 1.25rem;
  --size-24: 1.5rem;
  --size-32: 2rem;
  --size-48: 3rem;
  --size-64: 4rem;
  
  --base-container: 1440px;

  /* 1.3 Tipografía (Primitivos) */
  --font-open-sans: 'Open Sans', system-ui, -apple-system, sans-serif;
  --font-size-12: 0.75rem;
  --font-size-14: 0.875rem;
  --font-size-16: 1rem;
  --font-size-18: 1.125rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-32: 2rem;

  /* 1.4 Variables Físicas (Sombras, Bordes, Opacidad) */
  --elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --elevation-2: 0 4px 6px rgba(0,0,0,0.1);
  --elevation-3: 0 10px 15px -3px rgba(0,0,0,0.1);
  --radius-0: 0px;
  --radius-4: 4px;
  --radius-8: 8px;
  --radius-16: 16px;
  --radius-max: 9999px;
  --opacity-50: 0.5;


  /* ==========================================================================
     NIVEL 2: SEMANTIC TOKENS (Alias)
     ========================================================================== */
  
  /* 2.1 Colores de Marca y Feedback */
  --color-primary-base: var(--color-green-500);
  --color-primary-hover: var(--color-green-700);
  --color-primary-light: var(--color-green-200);
  
  --color-secondary-base: var(--color-blue-900);
  --color-secondary-hover: #030424; /* Un poco mas oscuro que azul profundo */
  --color-secondary-light: #121A80; 

  --color-success: var(--color-green-500);
  --color-error: var(--color-red-500);
  --color-warning: var(--color-yellow-500);
  --color-info: var(--color-blue-info-500);

  /* 2.2 Colores de Superficie y Texto (Theme: Light) */
  --surface-app: var(--color-gray-50);
  --surface-main: var(--color-white);
  --surface-main-rgb: 255, 255, 255;
  --border-subtle: var(--color-gray-300);
  --border-strong: var(--color-gray-400);
  --text-main: var(--color-gray-900);
  --text-muted: var(--color-gray-600);
  --text-inverse: var(--color-white);

  /* 2.3 Espaciado Semántico */
  --space-xs: var(--size-4);
  --space-sm: var(--size-8);
  --space-md: var(--size-12);
  --space-lg: var(--size-16);
  --space-xl: var(--size-24);
  --space-2xl: var(--size-32);
  --space-3xl: var(--size-48);
  --space-4xl: var(--size-64);

  --grid-gutter: var(--space-lg);
  --grid-gap: var(--space-xl);
  --container-max-width: var(--base-container);

  /* 2.4 Tipografía Semántica */
  --font-family-headings: var(--font-open-sans);
  --font-family-base: var(--font-open-sans);
  --text-xs: var(--font-size-12);
  --text-sm: var(--font-size-14);
  --text-base: var(--font-size-16);
  --text-lg: var(--font-size-18);
  --text-xl: var(--font-size-20);
  --text-2xl: var(--font-size-24);
  --text-3xl: var(--font-size-32);

  /* 2.5 Estilos Visuales Semánticos */
  --shadow-sm: var(--elevation-1);
  --shadow-md: var(--elevation-2);
  --shadow-lg: var(--elevation-3);
  
  --shadow-primary: 0 8px 24px -6px rgba(79, 170, 44, 0.4); /* Verde Brillante */
  --shadow-primary-hover: 0 12px 32px -8px rgba(79, 170, 44, 0.6);
  --shadow-subtle: 0 4px 14px 0 rgba(0, 0, 0, 0.05); /* Suave neutral */
  
  --backdrop-blur-md: blur(12px);

  --rounded-none: var(--radius-0);
  --rounded-sm: var(--radius-4);
  --rounded-md: var(--radius-8);
  --rounded-lg: var(--radius-16);
  --rounded-full: var(--radius-max);
}

:root {


  /* ==========================================================================
     NIVEL 3: COMPONENT TOKENS (Específicos)
     ========================================================================== */

  /* States (General Interactables) */
  --state-disabled-opacity: var(--opacity-50);
  --state-focus-ring: 0 0 0 4px rgba(79, 170, 44, 0.25); /* Glowing focus ring */
  --state-error-ring: 0 0 0 4px rgba(220, 53, 69, 0.25);

  /* Botones (Button) */
  --btn-primary-bg: var(--color-primary-base);
  --btn-primary-bg-hover: var(--color-primary-hover);
  --btn-primary-text: var(--text-inverse);
  
  --btn-secondary-bg: var(--color-secondary-base);
  --btn-secondary-bg-hover: var(--color-secondary-hover);
  --btn-secondary-text: var(--text-inverse);

  --btn-radius: var(--rounded-md); /* Un poco mas redondeado por modernidad */
  --btn-padding-y: var(--space-md);
  --btn-padding-x: var(--space-xl);

  /* Entradas de Texto (Input) */
  --input-bg: var(--surface-main);
  --input-text: var(--text-main);
  --input-border: var(--border-strong);
  --input-border-focus: var(--color-primary-base);
  --input-radius: var(--rounded-md);
  --input-padding: var(--space-md);

  /* Tarjetas (Card) */
  --card-bg: var(--surface-main);
  --card-border: var(--border-subtle);
  --card-radius: var(--rounded-lg);
  --card-shadow: var(--shadow-sm);
  --card-padding: var(--space-lg);
  
  /* Iconos */
  --icon-sm: var(--size-16);
  --icon-md: var(--size-20);
  --icon-lg: var(--size-24);
  --icon-xl: var(--size-32);
  --stroke-thin: 1.5px;
  --stroke-regular: 2px;
  --stroke-bold: 2.5px;

  /* Line Heights y Trackings */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --tracking-tighter: -0.05em;
  --tracking-tight: -0.025em;
  --tracking-normal: 0em;
  --tracking-wide: 0.025em;
  --tracking-widest: 0.1em;
}