/* ==========================================================================
   ARTEFACTO VISUAL — Design Tokens
   tokens.css · v1.0 · 2026
   
   Estructura:
   1. Paleta base (valores primitivos, no usar directamente en componentes)
   2. Tokens semánticos light mode
   3. Tokens semánticos dark mode
   4. Tipografía
   5. Espaciado
   6. Breakpoints
   7. Miscelánea (radios, transiciones, sombras)
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. PALETA BASE — Primitivos
   Prefijo: --primitive-
   No referenciar directamente en componentes. Usar tokens semánticos.
   -------------------------------------------------------------------------- */

:root {

  /* Índigo (color principal) */
  --primitive-indigo-50:  #EEEDFB;
  --primitive-indigo-100: #C9C5F3;
  --primitive-indigo-200: #9F98E8;
  --primitive-indigo-400: #6358CC;
  --primitive-indigo-600: #2C1EB1;
  --primitive-indigo-800: #1A0F7A;
  --primitive-indigo-900: #0D0745;

  /* Cian (color secundario) */
  --primitive-cyan-50:  #E0F5F5;
  --primitive-cyan-100: #A0DEDE;
  --primitive-cyan-200: #5EC4C4;
  --primitive-cyan-400: #1F9E9E;
  --primitive-cyan-600: #0D7A7A;
  --primitive-cyan-800: #0A4A4A;
  --primitive-cyan-900: #052828;

  /* Neutros (gris con temperatura índigo) */
  --primitive-neutral-50:  #F5F5F8;
  --primitive-neutral-100: #E2E2EA;
  --primitive-neutral-200: #C4C4D0;
  --primitive-neutral-400: #8A8A9A;
  --primitive-neutral-600: #56566A;
  --primitive-neutral-800: #2A2A3A;
  --primitive-neutral-900: #12121E;

  /* Semánticos de estado */
  --primitive-success-bg:   #E8F5E9;
  --primitive-success-main: #2E7D32;
  --primitive-success-dark: #1B5E20;

  --primitive-error-bg:   #FFEBEE;
  --primitive-error-main: #C62828;
  --primitive-error-dark: #B71C1C;

  --primitive-warning-bg:   #FFF8E1;
  --primitive-warning-main: #F57F17;
  --primitive-warning-dark: #E65100;

  --primitive-info-bg:   #EEEDFB;
  --primitive-info-main: #2C1EB1;
  --primitive-info-dark: #1A0F7A;

}


/* --------------------------------------------------------------------------
   2. TOKENS SEMÁNTICOS — Light mode (default)
   Prefijo: --color-, --text-, --border-
   Estos son los tokens que usan los componentes.
   -------------------------------------------------------------------------- */

:root {

  /* Marca */
  --color-brand-primary:         var(--primitive-indigo-600);
  --color-brand-primary-hover:   var(--primitive-indigo-800);
  --color-brand-primary-subtle:  var(--primitive-indigo-50);
  --color-brand-secondary:       var(--primitive-cyan-600);
  --color-brand-secondary-hover: var(--primitive-cyan-800);
  --color-brand-secondary-subtle:var(--primitive-cyan-50);

  /* Fondos */
  --color-bg-page:        var(--primitive-neutral-50);
  --color-bg-surface:     #FFFFFF;
  --color-bg-elevated:    #FFFFFF;
  --color-bg-sunken:      var(--primitive-neutral-100);
  --color-bg-overlay:     rgba(18, 18, 30, 0.48);

  /* Texto */
  --color-text-primary:   var(--primitive-neutral-900);
  --color-text-secondary: var(--primitive-neutral-600);
  --color-text-tertiary:  var(--primitive-neutral-400);
  --color-text-inverse:   #FFFFFF;
  --color-text-brand:     var(--primitive-indigo-600);
  --color-text-link:      var(--primitive-indigo-600);
  --color-text-link-hover:var(--primitive-indigo-800);

  /* Bordes */
  --color-border-subtle:  var(--primitive-neutral-100);
  --color-border-default: var(--primitive-neutral-200);
  --color-border-strong:  var(--primitive-neutral-400);
  --color-border-brand:   var(--primitive-indigo-600);

  /* Estados semánticos */
  --color-success-bg:     var(--primitive-success-bg);
  --color-success:        var(--primitive-success-main);
  --color-success-text:   var(--primitive-success-dark);

  --color-error-bg:       var(--primitive-error-bg);
  --color-error:          var(--primitive-error-main);
  --color-error-text:     var(--primitive-error-dark);

  --color-warning-bg:     var(--primitive-warning-bg);
  --color-warning:        var(--primitive-warning-main);
  --color-warning-text:   var(--primitive-warning-dark);

  --color-info-bg:        var(--primitive-info-bg);
  --color-info:           var(--primitive-info-main);
  --color-info-text:      var(--primitive-info-dark);

  /* Botón primario */
  --color-btn-primary-bg:      var(--primitive-indigo-600);
  --color-btn-primary-bg-hover:var(--primitive-indigo-800);
  --color-btn-primary-text:    #FFFFFF;

  /* Botón secundario */
  --color-btn-secondary-bg:      transparent;
  --color-btn-secondary-bg-hover:var(--primitive-indigo-50);
  --color-btn-secondary-border:  var(--primitive-indigo-600);
  --color-btn-secondary-text:    var(--primitive-indigo-600);

  /* Botón destructivo */
  --color-btn-danger-bg:       var(--primitive-error-main);
  --color-btn-danger-bg-hover: var(--primitive-error-dark);
  --color-btn-danger-text:     #FFFFFF;

}


/* --------------------------------------------------------------------------
   3. TOKENS SEMÁNTICOS — Dark mode
   Se activa automáticamente por preferencia del sistema.
   El selector [data-theme="dark"] permite forzarlo manualmente con JS.
   -------------------------------------------------------------------------- */

/* Activación por atributo manual (JS toggle) */
:root[data-theme="dark"] {

  /* Marca (el índigo 400 supera WCAG AA sobre fondos oscuros) */
  --color-brand-primary:         var(--primitive-indigo-400);
  --color-brand-primary-hover:   var(--primitive-indigo-200);
  --color-brand-primary-subtle:  var(--primitive-indigo-900);
  --color-brand-secondary:       var(--primitive-cyan-400);
  --color-brand-secondary-hover: var(--primitive-cyan-200);
  --color-brand-secondary-subtle:var(--primitive-cyan-900);

  /* Fondos */
  --color-bg-page:        var(--primitive-neutral-900);
  --color-bg-surface:     var(--primitive-neutral-800);
  --color-bg-elevated:    #1E1E2C;
  --color-bg-sunken:      #0A0A14;
  --color-bg-overlay:     rgba(0, 0, 0, 0.64);

  /* Texto */
  --color-text-primary:   var(--primitive-neutral-50);
  --color-text-secondary: var(--primitive-neutral-200);
  --color-text-tertiary:  var(--primitive-neutral-400);
  --color-text-inverse:   var(--primitive-neutral-900);
  --color-text-brand:     var(--primitive-indigo-200);
  --color-text-link:      var(--primitive-indigo-200);
  --color-text-link-hover:var(--primitive-indigo-100);

  /* Bordes */
  --color-border-subtle:  rgba(255, 255, 255, 0.06);
  --color-border-default: rgba(255, 255, 255, 0.12);
  --color-border-strong:  rgba(255, 255, 255, 0.24);
  --color-border-brand:   var(--primitive-indigo-400);

  /* Estados semánticos dark */
  --color-success-bg:     rgba(46, 125, 50, 0.15);
  --color-success:        #66BB6A;
  --color-success-text:   #A5D6A7;

  --color-error-bg:       rgba(198, 40, 40, 0.15);
  --color-error:          #EF5350;
  --color-error-text:     #FFCDD2;

  --color-warning-bg:     rgba(245, 127, 23, 0.15);
  --color-warning:        #FFA726;
  --color-warning-text:   #FFE0B2;

  --color-info-bg:        rgba(44, 30, 177, 0.20);
  --color-info:           var(--primitive-indigo-400);
  --color-info-text:      var(--primitive-indigo-100);

  /* Botones dark */
  --color-btn-primary-bg:       var(--primitive-indigo-400);
  --color-btn-primary-bg-hover: var(--primitive-indigo-200);
  --color-btn-primary-text:     var(--primitive-neutral-900);

  --color-btn-secondary-bg:       transparent;
  --color-btn-secondary-bg-hover: var(--primitive-indigo-900);
  --color-btn-secondary-border:   var(--primitive-indigo-400);
  --color-btn-secondary-text:     var(--primitive-indigo-200);

  --color-btn-danger-bg:       #EF5350;
  --color-btn-danger-bg-hover: #E53935;
  --color-btn-danger-text:     #FFFFFF;

}

/* Activacion automatica por preferencia del sistema
   Solo actua si el usuario no ha forzado un tema con data-theme */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {

    --color-brand-primary:          var(--primitive-indigo-400);
    --color-brand-primary-hover:    var(--primitive-indigo-200);
    --color-brand-primary-subtle:   var(--primitive-indigo-900);
    --color-brand-secondary:        var(--primitive-cyan-400);
    --color-brand-secondary-hover:  var(--primitive-cyan-200);
    --color-brand-secondary-subtle: var(--primitive-cyan-900);

    --color-bg-page:     var(--primitive-neutral-900);
    --color-bg-surface:  var(--primitive-neutral-800);
    --color-bg-elevated: #1E1E2C;
    --color-bg-sunken:   #0A0A14;
    --color-bg-overlay:  rgba(0, 0, 0, 0.64);

    --color-text-primary:    var(--primitive-neutral-50);
    --color-text-secondary:  var(--primitive-neutral-200);
    --color-text-tertiary:   var(--primitive-neutral-400);
    --color-text-inverse:    var(--primitive-neutral-900);
    --color-text-brand:      var(--primitive-indigo-200);
    --color-text-link:       var(--primitive-indigo-200);
    --color-text-link-hover: var(--primitive-indigo-100);

    --color-border-subtle:  rgba(255, 255, 255, 0.06);
    --color-border-default: rgba(255, 255, 255, 0.12);
    --color-border-strong:  rgba(255, 255, 255, 0.24);
    --color-border-brand:   var(--primitive-indigo-400);

    --color-success-bg:   rgba(46, 125, 50, 0.15);
    --color-success:      #66BB6A;
    --color-success-text: #A5D6A7;

    --color-error-bg:   rgba(198, 40, 40, 0.15);
    --color-error:      #EF5350;
    --color-error-text: #FFCDD2;

    --color-warning-bg:   rgba(245, 127, 23, 0.15);
    --color-warning:      #FFA726;
    --color-warning-text: #FFE0B2;

    --color-info-bg:   rgba(44, 30, 177, 0.20);
    --color-info:      var(--primitive-indigo-400);
    --color-info-text: var(--primitive-indigo-100);

    --color-btn-primary-bg:       var(--primitive-indigo-400);
    --color-btn-primary-bg-hover: var(--primitive-indigo-200);
    --color-btn-primary-text:     var(--primitive-neutral-900);

    --color-btn-secondary-bg:       transparent;
    --color-btn-secondary-bg-hover: var(--primitive-indigo-900);
    --color-btn-secondary-border:   var(--primitive-indigo-400);
    --color-btn-secondary-text:     var(--primitive-indigo-200);

    --color-btn-danger-bg:       #EF5350;
    --color-btn-danger-bg-hover: #E53935;
    --color-btn-danger-text:     #FFFFFF;

  }
}


/* --------------------------------------------------------------------------
   4. TIPOGRAFIA
   Montserrat y Roboto Flex se cargan via Google Fonts
   -------------------------------------------------------------------------- */

:root {

  /* Familias */
  --font-display:  'Montserrat', Arial, sans-serif;
  --font-body:     'Roboto Flex', Arial, sans-serif;
  --font-mono:     'Roboto Mono', 'Courier New', monospace;

  /* Escala tipográfica (ratio 1.25 — Major Third) */
  --text-xs:   0.64rem;   /* 10.24px */
  --text-sm:   0.8rem;    /* 12.8px  */
  --text-base: 1rem;      /* 16px    */
  --text-md:   1.25rem;   /* 20px    */
  --text-lg:   1.563rem;  /* 25px    */
  --text-xl:   1.953rem;  /* 31.25px */
  --text-2xl:  2.441rem;  /* 39px    */
  --text-3xl:  3.052rem;  /* 48.8px  */

  /* Pesos */
  --weight-regular: 400;
  --weight-medium:  500;
  --weight-bold:    700;

  /* Interlineado */
  --leading-tight:  1.2;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  /* Tracking (letter-spacing) */
  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

}


/* --------------------------------------------------------------------------
   5. ESPACIADO
   Base: 8px · Escala: multiplicadores del base
   Usar siempre estas variables, nunca valores px directos en componentes.
   -------------------------------------------------------------------------- */

:root {

  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px — unidad mínima */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* Espaciado de secciones (macrolayout) */
  --section-gap:     var(--space-16);
  --section-gap-lg:  var(--space-24);
  --container-px:    var(--space-6);

}


/* --------------------------------------------------------------------------
   6. BREAKPOINTS
   Mobile-first. Usar en media queries como referencia.
   No se pueden usar como variables en media queries nativas (limitación CSS).
   Se documentan aquí como referencia y se usan en JS cuando sea necesario.
   
   xs:  0px      → móvil pequeño (base)
   sm:  480px    → móvil estándar
   md:  768px    → tablet
   lg:  1024px   → desktop pequeño
   xl:  1280px   → desktop estándar
   2xl: 1536px   → desktop grande
   -------------------------------------------------------------------------- */

:root {
  --bp-sm:  480;
  --bp-md:  768;
  --bp-lg:  1024;
  --bp-xl:  1280;
  --bp-2xl: 1536;
}


/* --------------------------------------------------------------------------
   7. MISCELÁNEA
   -------------------------------------------------------------------------- */

:root {

  /* Radios de borde */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* Transiciones */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;
  --transition-colors: color 250ms ease, background-color 250ms ease, border-color 250ms ease;

  /* Sombras (mínimas, solo funcionales) */
  --shadow-sm: 0 1px 3px rgba(12, 12, 30, 0.08);
  --shadow-md: 0 4px 12px rgba(12, 12, 30, 0.10);
  --shadow-lg: 0 8px 24px rgba(12, 12, 30, 0.12);

  /* Z-index (escala controlada) */
  --z-below:   -1;
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* Ancho máximo del contenedor */
  --container-max: 1200px;
  --container-narrow: 760px;

}