/* ═══════════════════════════════════════════════════════════════
   XPYME Design System — CSS Custom Properties
   Generado desde tokens.json v1.2.0
   ═══════════════════════════════════════════════════════════════ */

:root {

    /* ═══ NIVEL 1: Global Tokens (Primitivos) ═══
       Valores absolutos sin contexto. NO usar directamente en componentes. */

    /* Paleta Teal (Color de marca) */
    --color-teal-50:  #E0F7FA;
    --color-teal-100: #B2EBF2;
    --color-teal-200: #80DEEA;
    --color-teal-300: #4DD0E1;
    --color-teal-400: #26C6DA;
    --color-teal-500: #00BCD4;
    --color-teal-600: #00ACC1;
    --color-teal-700: #0097A7;
    --color-teal-800: #00838F;
    --color-teal-900: #006064;

    /* Paleta Slate (Secundario) */
    --color-slate-50:  #ECEFF1;
    --color-slate-100: #CFD8DC;
    --color-slate-200: #B0BEC5;
    --color-slate-300: #90A4AE;
    --color-slate-400: #78909C;
    --color-slate-500: #607D8B;
    --color-slate-600: #546E7A;
    --color-slate-700: #455A64;
    --color-slate-800: #37474F;
    --color-slate-900: #263238;

    /* Paleta Gray (Neutros) */
    --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;

    /* Colores semilla de feedback */
    --color-green-500:  #28A745;
    --color-red-500:    #DC3545;
    --color-yellow-500: #FFC107;
    --color-blue-500:   #17A2B8;
    --color-white:      #FFFFFF;

    /* Tamaños base (sistema 8pt) */
    --size-4:  0.25rem;  /* 4px */
    --size-8:  0.5rem;   /* 8px */
    --size-12: 0.75rem;  /* 12px */
    --size-16: 1rem;     /* 16px */
    --size-20: 1.25rem;  /* 20px */
    --size-24: 1.5rem;   /* 24px */
    --size-32: 2rem;     /* 32px */
    --size-48: 3rem;     /* 48px */
    --size-64: 4rem;     /* 64px */

    /* Tipografía primitiva */
    --font-inter: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --font-size-12: 0.75rem;   /* 12px */
    --font-size-14: 0.875rem;  /* 14px */
    --font-size-16: 1rem;      /* 16px */
    --font-size-18: 1.125rem;  /* 18px */
    --font-size-20: 1.25rem;   /* 20px */
    --font-size-24: 1.5rem;    /* 24px */
    --font-size-32: 2rem;      /* 32px */

    /* Border Radius primitivo */
    --radius-0:   0px;
    --radius-4:   4px;
    --radius-8:   8px;
    --radius-16:  16px;
    --radius-max: 9999px;

    /* Box Shadow primitivo */
    --shadow-light-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-light-2: 0 4px 6px rgba(0,0,0,0.1);
    --shadow-light-3: 0 10px 15px -3px rgba(0,0,0,0.1);


    /* ═══ NIVEL 2: Semantic Tokens (Alias / Tema) ═══
       Tokens con propósito. Usar en layouts y utilidades. */

    /* Color semántico */
    --color-primary-base:  var(--color-teal-700);   /* #0097A7 */
    --color-primary-hover: var(--color-teal-800);   /* #00838F */
    --color-primary-light: var(--color-teal-200);   /* #80DEEA */

    --color-secondary-base:  var(--color-slate-800); /* #37474F */
    --color-secondary-hover: var(--color-slate-900); /* #263238 */

    --color-success: var(--color-green-500);  /* #28A745 */
    --color-error:   var(--color-red-500);    /* #DC3545 */
    --color-warning: var(--color-yellow-500); /* #FFC107 */
    --color-info:    var(--color-blue-500);   /* #17A2B8 */

    /* Superficies */
    --surface-app:  var(--color-gray-50);  /* #F8F9FA — fondo general */
    --surface-main: var(--color-white);    /* #FFFFFF — tarjetas, modales */

    /* Bordes */
    --border-subtle: var(--color-gray-300); /* #DEE2E6 — divisores suaves */
    --border-strong: var(--color-gray-400); /* #CED4DA — contornos inputs */

    /* Texto */
    --text-main:    var(--color-gray-900); /* #212529 — títulos, cuerpo */
    --text-muted:   var(--color-gray-600); /* #868E96 — metadatos */
    --text-inverse: var(--color-white);    /* #FFFFFF — sobre fondos oscuros */

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

    /* Tipografía semántica */
    --font-family-main: var(--font-inter);

    --text-xs:   var(--font-size-12);  /* 12px */
    --text-sm:   var(--font-size-14);  /* 14px */
    --text-base: var(--font-size-16);  /* 16px */
    --text-lg:   var(--font-size-18);  /* 18px */
    --text-xl:   var(--font-size-20);  /* 20px */
    --text-2xl:  var(--font-size-24);  /* 24px */
    --text-3xl:  var(--font-size-32);  /* 32px */

    /* Line-height */
    --leading-none:    1;
    --leading-tight:   1.25;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;

    /* Letter-spacing */
    --tracking-tighter: -0.05em;
    --tracking-normal:  0em;
    --tracking-widest:  0.1em;

    /* Visual semántico — Border Radius */
    --rounded-none: var(--radius-0);
    --rounded-sm:   var(--radius-4);   /* inputs, botones */
    --rounded-md:   var(--radius-8);   /* tarjetas, dropdowns */
    --rounded-lg:   var(--radius-16);  /* modales */
    --rounded-full: var(--radius-max); /* avatares, pills */

    /* Visual semántico — Sombras */
    --shadow-sm: var(--shadow-light-1);
    --shadow-md: var(--shadow-light-2);
    --shadow-lg: var(--shadow-light-3);

    /* Grilla */
    --grid-columns: 12;
    --grid-gutter:  16px;
    --grid-gap:     24px;
    --container-max-width: 1440px;

    /* Iconos (Lucide) */
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;

    --stroke-thin:    1.5px;
    --stroke-regular: 2px;
    --stroke-bold:    2.5px;

    /* Estados */
    --state-focus-ring: 0 0 0 3px rgba(0, 151, 167, 0.25);


    /* ═══ NIVEL 3: Component Tokens (Específicos) ═══
       Primera opción al construir componentes de UI. */

    /* Botón primario */
    --btn-primary-bg:       var(--color-primary-base);
    --btn-primary-bg-hover: var(--color-primary-hover);
    --btn-primary-text:     var(--text-inverse);

    /* Botón secundario */
    --btn-secondary-bg:       var(--color-secondary-base);
    --btn-secondary-bg-hover: var(--color-secondary-hover);
    --btn-secondary-text:     var(--text-inverse);

    /* Padding y radius de botones */
    --btn-padding-y: var(--space-md);  /* 12px */
    --btn-padding-x: var(--space-xl);  /* 24px */
    --btn-radius:    var(--rounded-sm); /* 4px */

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

    /* Card */
    --card-bg:      var(--surface-main);
    --card-border:  var(--border-subtle);
    --card-shadow:  var(--shadow-sm);
    --card-padding: var(--space-lg);
    --card-radius:  var(--rounded-md);
}