/* ==========================================================================
   Wabit — sistema de tokens
   Versión 1.1

   Uso:
     1. Importar este archivo antes que cualquier hoja de estilos del proyecto.
     2. El modo claro es el predeterminado. Para forzar oscuro:
        <html data-theme="dark">  ·  para seguir al sistema, no declarar nada.
     3. Para teñir una app o sección con el acento de un producto:
        <body data-product="lumi">  (lumi · prometeo · ispeak · wardius)
        Sin el atributo, el acento es el lima de Wabit.

   Regla de marca: el lima #C2F04A es exclusivo de la empresa.
   Ningún producto lo usa como acento.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Capa 1 — Paleta base
   Valores literales. No se consumen directamente en componentes.
   -------------------------------------------------------------------------- */

:root {
  /* Grafito — neutrales */
  --wbt-grafito-950: #0D1117;
  --wbt-grafito-900: #131922;
  --wbt-grafito-850: #1A212B;
  --wbt-grafito-800: #222B36;
  --wbt-grafito-700: #2E3844;
  --wbt-grafito-600: #414D5B;
  --wbt-grafito-500: #5A6674;
  --wbt-grafito-400: #7D8895;
  --wbt-grafito-300: #A3ACB8;
  --wbt-grafito-200: #C6CDD6;
  --wbt-grafito-100: #DDE3EA;
  --wbt-grafito-50:  #F4F6F8;
  --wbt-grafito-0:   #FFFFFF;

  /* Lima — acento de empresa */
  --wbt-lima-300: #E0F9A8;
  --wbt-lima-400: #D3F573;
  --wbt-lima-500: #C2F04A;
  --wbt-lima-600: #A8D62F;
  --wbt-lima-700: #7FA31F;
  --wbt-lima-800: #5C7615;

  /* Acentos de producto */
  --wbt-violeta-400: #C4B5FD;
  --wbt-violeta-500: #A78BFA;
  --wbt-violeta-600: #8B5CF6;
  --wbt-violeta-800: #6D28D9;

  --wbt-cian-400: #67E8F9;
  --wbt-cian-500: #22D3EE;
  --wbt-cian-600: #06B6D4;
  --wbt-cian-800: #0E7490;

  --wbt-azul-400: #93C5FD;
  --wbt-azul-500: #60A5FA;
  --wbt-azul-600: #3B82F6;
  --wbt-azul-800: #1E40AF;

  --wbt-rosa-400: #F9A8D4;
  --wbt-rosa-500: #F472B6;
  --wbt-rosa-600: #EC4899;
  --wbt-rosa-800: #BE185D;

  /* Estados semánticos */
  --wbt-esmeralda-500: #34D399;
  --wbt-esmeralda-800: #047857;
  --wbt-ambar-500:     #FBBF24;
  --wbt-ambar-800:     #B45309;
  --wbt-rojo-500:      #F87171;
  --wbt-rojo-800:      #B91C1C;
}

/* --------------------------------------------------------------------------
   Capa 2 — Tokens de propósito · modo claro
   Esta es la capa que consumen los componentes.
   -------------------------------------------------------------------------- */

:root {
  /* Superficies */
  --wbt-surface-0: var(--wbt-grafito-50);
  --wbt-surface-1: var(--wbt-grafito-0);
  --wbt-surface-2: var(--wbt-grafito-0);
  --wbt-surface-inverse: var(--wbt-grafito-950);

  /* Texto */
  --wbt-text-primary:   var(--wbt-grafito-950);
  --wbt-text-secondary: var(--wbt-grafito-500);
  --wbt-text-muted:     var(--wbt-grafito-400);
  --wbt-text-disabled:  var(--wbt-grafito-300);
  --wbt-text-inverse:   var(--wbt-grafito-50);

  /* Bordes */
  --wbt-border:        var(--wbt-grafito-100);
  --wbt-border-strong: var(--wbt-grafito-200);

  /* Acento — Wabit por defecto.
     -fill  : fondo sólido de controles (lleva --wbt-on-accent encima)
     -text  : para texto y links sobre superficie clara, cumple AA
     -bg    : tinte suave de fondo
     -border: borde de énfasis */
  --wbt-accent-fill:        var(--wbt-lima-500);
  --wbt-accent-fill-hover:  var(--wbt-lima-400);
  --wbt-accent-fill-active: var(--wbt-lima-600);
  --wbt-accent-text:        var(--wbt-lima-800);
  --wbt-accent-bg:          rgba(194, 240, 74, 0.16);
  --wbt-accent-border:      var(--wbt-lima-600);
  --wbt-on-accent:          var(--wbt-grafito-950);

  /* Estados */
  --wbt-success-fill:   var(--wbt-esmeralda-500);
  --wbt-success-text:   var(--wbt-esmeralda-800);
  --wbt-success-bg:     rgba(52, 211, 153, 0.14);
  --wbt-success-border: var(--wbt-esmeralda-500);

  --wbt-warning-fill:   var(--wbt-ambar-500);
  --wbt-warning-text:   var(--wbt-ambar-800);
  --wbt-warning-bg:     rgba(251, 191, 36, 0.16);
  --wbt-warning-border: var(--wbt-ambar-500);

  --wbt-danger-fill:    var(--wbt-rojo-500);
  --wbt-danger-text:    var(--wbt-rojo-800);
  --wbt-danger-bg:      rgba(248, 113, 113, 0.14);
  --wbt-danger-border:  var(--wbt-rojo-500);

  --wbt-on-status: var(--wbt-grafito-950);

  /* Foco */
  --wbt-focus-ring: 0 0 0 2px var(--wbt-surface-1), 0 0 0 4px var(--wbt-accent-border);
}

/* --------------------------------------------------------------------------
   Capa 2 — Tokens de propósito · modo oscuro
   -------------------------------------------------------------------------- */

[data-theme="dark"] {
  --wbt-surface-0: var(--wbt-grafito-950);
  --wbt-surface-1: var(--wbt-grafito-850);
  --wbt-surface-2: var(--wbt-grafito-800);
  --wbt-surface-inverse: var(--wbt-grafito-50);

  --wbt-text-primary:   var(--wbt-grafito-50);
  --wbt-text-secondary: var(--wbt-grafito-300);
  --wbt-text-muted:     var(--wbt-grafito-400);
  --wbt-text-disabled:  var(--wbt-grafito-600);
  --wbt-text-inverse:   var(--wbt-grafito-950);

  --wbt-border:        var(--wbt-grafito-700);
  --wbt-border-strong: var(--wbt-grafito-600);

  --wbt-accent-text: var(--wbt-lima-500);
  --wbt-accent-bg:   rgba(194, 240, 74, 0.12);

  --wbt-success-text: var(--wbt-esmeralda-500);
  --wbt-warning-text: var(--wbt-ambar-500);
  --wbt-danger-text:  var(--wbt-rojo-500);

  --wbt-focus-ring: 0 0 0 2px var(--wbt-surface-0), 0 0 0 4px var(--wbt-accent-fill);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --wbt-surface-0: var(--wbt-grafito-950);
    --wbt-surface-1: var(--wbt-grafito-850);
    --wbt-surface-2: var(--wbt-grafito-800);
    --wbt-surface-inverse: var(--wbt-grafito-50);

    --wbt-text-primary:   var(--wbt-grafito-50);
    --wbt-text-secondary: var(--wbt-grafito-300);
    --wbt-text-muted:     var(--wbt-grafito-400);
    --wbt-text-disabled:  var(--wbt-grafito-600);
    --wbt-text-inverse:   var(--wbt-grafito-950);

    --wbt-border:        var(--wbt-grafito-700);
    --wbt-border-strong: var(--wbt-grafito-600);

    --wbt-accent-text: var(--wbt-lima-500);
    --wbt-accent-bg:   rgba(194, 240, 74, 0.12);

    --wbt-success-text: var(--wbt-esmeralda-500);
    --wbt-warning-text: var(--wbt-ambar-500);
    --wbt-danger-text:  var(--wbt-rojo-500);
  }
}

/* --------------------------------------------------------------------------
   Capa 3 — Temas de producto
   Solo redefinen el acento. Todo lo demás lo heredan de Wabit:
   eso es lo que los mantiene como familia.
   -------------------------------------------------------------------------- */

[data-product="lumi"] {
  --wbt-accent-fill:        var(--wbt-violeta-500);
  --wbt-accent-fill-hover:  var(--wbt-violeta-400);
  --wbt-accent-fill-active: var(--wbt-violeta-600);
  --wbt-accent-text:        var(--wbt-violeta-800);
  --wbt-accent-bg:          rgba(167, 139, 250, 0.16);
  --wbt-accent-border:      var(--wbt-violeta-600);
}

[data-product="prometeo"] {
  --wbt-accent-fill:        var(--wbt-cian-500);
  --wbt-accent-fill-hover:  var(--wbt-cian-400);
  --wbt-accent-fill-active: var(--wbt-cian-600);
  --wbt-accent-text:        var(--wbt-cian-800);
  --wbt-accent-bg:          rgba(34, 211, 238, 0.16);
  --wbt-accent-border:      var(--wbt-cian-600);
}

[data-product="wardius"] {
  --wbt-accent-fill:        var(--wbt-azul-500);
  --wbt-accent-fill-hover:  var(--wbt-azul-400);
  --wbt-accent-fill-active: var(--wbt-azul-600);
  --wbt-accent-text:        var(--wbt-azul-800);
  --wbt-accent-bg:          rgba(96, 165, 250, 0.16);
  --wbt-accent-border:      var(--wbt-azul-600);
}

[data-product="ispeak"] {
  --wbt-accent-fill:        var(--wbt-rosa-500);
  --wbt-accent-fill-hover:  var(--wbt-rosa-400);
  --wbt-accent-fill-active: var(--wbt-rosa-600);
  --wbt-accent-text:        var(--wbt-rosa-800);
  --wbt-accent-bg:          rgba(244, 114, 182, 0.16);
  --wbt-accent-border:      var(--wbt-rosa-600);
}

[data-theme="dark"] [data-product="lumi"],
[data-theme="dark"][data-product="lumi"] {
  --wbt-accent-text: var(--wbt-violeta-500);
  --wbt-accent-bg:   rgba(167, 139, 250, 0.12);
}

[data-theme="dark"] [data-product="prometeo"],
[data-theme="dark"][data-product="prometeo"] {
  --wbt-accent-text: var(--wbt-cian-500);
  --wbt-accent-bg:   rgba(34, 211, 238, 0.12);
}

[data-theme="dark"] [data-product="wardius"],
[data-theme="dark"][data-product="wardius"] {
  --wbt-accent-text: var(--wbt-azul-500);
  --wbt-accent-bg:   rgba(96, 165, 250, 0.12);
}

[data-theme="dark"] [data-product="ispeak"],
[data-theme="dark"][data-product="wardius"] {
  --wbt-accent-fill:        var(--wbt-azul-500);
  --wbt-accent-fill-hover:  var(--wbt-azul-400);
  --wbt-accent-fill-active: var(--wbt-azul-600);
  --wbt-accent-text:        var(--wbt-azul-800);
  --wbt-accent-bg:          rgba(96, 165, 250, 0.16);
  --wbt-accent-border:      var(--wbt-azul-600);
}

[data-product="ispeak"] {
  --wbt-accent-text: var(--wbt-rosa-500);
  --wbt-accent-bg:   rgba(244, 114, 182, 0.12);
}

/* --------------------------------------------------------------------------
   Tipografía
   Space Grotesk · Inter · JetBrains Mono — todas de licencia abierta.
   Cargar desde Google Fonts o alojarlas localmente:
   https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap
   -------------------------------------------------------------------------- */

:root {
  --wbt-font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --wbt-font-sans:    "Inter", ui-sans-serif, system-ui, sans-serif;
  --wbt-font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --wbt-text-xs:   0.75rem;   /* 12px — labels, metadatos */
  --wbt-text-sm:   0.8125rem; /* 13px — tablas densas */
  --wbt-text-base: 0.9375rem; /* 15px — cuerpo de interfaz */
  --wbt-text-md:   1rem;      /* 16px — cuerpo de lectura */
  --wbt-text-lg:   1.25rem;   /* 20px */
  --wbt-text-xl:   1.5rem;    /* 24px */
  --wbt-text-2xl:  2rem;      /* 32px */
  --wbt-text-3xl:  2.75rem;   /* 44px — display */

  --wbt-weight-regular: 400;
  --wbt-weight-medium:  500;
  --wbt-weight-bold:    600;

  --wbt-leading-tight: 1.2;
  --wbt-leading-base:  1.5;
  --wbt-leading-loose: 1.7;

  --wbt-tracking-display: -0.02em;
  --wbt-tracking-base:    0;
  --wbt-tracking-caps:    0.04em;
}

/* --------------------------------------------------------------------------
   Espaciado, radios y elevación
   Escala de 4px. El radio base es contenido a propósito: la geometría
   del isotipo es de esquinas rectas y el sistema debe acompañarla.
   -------------------------------------------------------------------------- */

:root {
  --wbt-space-1: 0.25rem;
  --wbt-space-2: 0.5rem;
  --wbt-space-3: 0.75rem;
  --wbt-space-4: 1rem;
  --wbt-space-5: 1.5rem;
  --wbt-space-6: 2rem;
  --wbt-space-7: 3rem;
  --wbt-space-8: 4rem;

  --wbt-radius-sm: 4px;
  --wbt-radius:    6px;
  --wbt-radius-lg: 10px;
  --wbt-radius-xl: 14px;   /* íconos de app */
  --wbt-radius-full: 9999px;

  --wbt-shadow-sm: 0 1px 2px rgba(13, 17, 23, 0.06);
  --wbt-shadow-md: 0 4px 12px rgba(13, 17, 23, 0.08);
  --wbt-shadow-lg: 0 12px 32px rgba(13, 17, 23, 0.12);

  --wbt-duration-fast: 120ms;
  --wbt-duration-base: 200ms;
  --wbt-easing: cubic-bezier(0.2, 0, 0, 1);
}

[data-theme="dark"] {
  --wbt-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --wbt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --wbt-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------------------------
   Nota de contraste
   El lima #C2F04A no cumple AA como texto sobre blanco. Sobre superficie
   clara use --wbt-accent-text (#5C7615) para texto y links, y reserve
   --wbt-accent-fill para fondos sólidos con --wbt-on-accent encima.
   Lo mismo aplica a los acentos de producto y a los colores de estado.
   -------------------------------------------------------------------------- */