/* variables.css
 * Central design tokens for the Digiliencia web interface.
 * INcibe official corporate brand palette: Rojo #E73137, Amarillo #FFDD00.
 * Reference: Manual de Identidad Visual Corporativa — INcibe.
 */

:root {
  /* ── INcibe Official Corporate Palette ────────────────────── */
  --color-incibe-red:          #E73137;   /* Rojo INcibe — color primario */
  --color-incibe-red-dark:     #c0282d;   /* Hover / sombra del rojo */
  --color-incibe-red-light:    #f7696d;   /* Acento suave */
  --color-incibe-red-muted:    rgba(231, 49, 55, 0.15); /* Fondo ligero */

  --color-incibe-yellow:       #FFDD00;   /* Amarillo INcibe — color secundario */
  --color-incibe-yellow-dark:  #d9bb00;   /* Hover del amarillo */
  --color-incibe-yellow-light: #fff4b3;   /* Highlight suave */

  --color-incibe-grey:         #4B5C66;   /* Gris corporativo (tipografía) */
  --color-incibe-grey-light:   #68757E;   /* Gris secundario */

  /* ── Surface / Background (tema claro) ──────────────────── */
  --color-bg:                  #f4f6f8;   /* Fondo general app (gris muy claro) */
  --color-surface:             #ffffff;   /* Tarjetas / paneles (blanco puro) */
  --color-surface-alt:         #f9fafb;   /* Fondo sidebar */
  --color-surface-hover:       #f0f2f5;   /* Hover en ítems */
  --color-border:              #e2e8f0;   /* Bordes sutiles */
  --color-border-strong:       #cbd5e1;   /* Bordes marcados */

  /* ── Text ─────────────────────────────────────────────────── */
  --color-text-primary:        #1e293b;   /* Texto principal muy oscuro (casi negro) */
  --color-text-secondary:      var(--color-incibe-grey); /* Texto secundario gris corporativo */
  --color-text-muted:          #64748b;   /* Textos de ayuda/placeholders */
  --color-text-inverse:        #ffffff;   /* Texto sobre botones oscuros/rojos */
  --color-text-on-yellow:      #1e293b;   /* Texto oscuro sobre amarillo */

  /* ── Semantic colours ─────────────────────────────────────── */
  --color-success:             #16a34a;
  --color-error:               var(--color-incibe-red);
  --color-warning:             #eab308;
  --color-info:                #0284c7;

  /* ── Message bubbles ──────────────────────────────────────── */
  --color-bubble-user-bg:      #ffffff;   /* Burbuja usuario blanca */
  --color-bubble-user-border:  var(--color-incibe-red); /* Borde rojo */
  --color-bubble-user-text:    var(--color-text-primary);
  --color-bubble-ai-bg:        #fffce8;   /* Burbuja IA con dejes de amarillo corporativo (#FFDD00 muy suave) */
  --color-bubble-ai-text:      var(--color-text-primary);

  /* ── Typography ───────────────────────────────────────────── */
  --font-family:               'Inter', 'Segoe UI', system-ui, sans-serif;
  --font-mono:                 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-size-xs:              0.8rem;    /* Aumentado ligeramente para mayor legibilidad */
  --font-size-sm:              0.9rem;
  --font-size-base:            1.05rem;   /* Base más grande y amigable */
  --font-size-md:              1.15rem;
  --font-size-lg:              1.3rem;
  --font-size-xl:              1.6rem;
  --font-size-2xl:             2rem;

  /* ── Spacing ──────────────────────────────────────────────── */
  --space-1:  0.3rem;
  --space-2:  0.6rem;
  --space-3:  0.85rem;
  --space-4:  1.2rem;   /* Espaciados más amplios (aire fresco) */
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-8:  2.5rem;
  --space-10: 3.5rem;
  --space-12: 4.5rem;

  /* ── Layout ───────────────────────────────────────────────── */
  --sidebar-width:             300px;
  --header-height:             56px;
  --chat-max-width:            1000px; /* Much wider chat area */

  /* ── Radii ────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* ── Shadows ──────────────────────────────────────────────── */
  --shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05); /* Sombras suaves para tema claro */
  --shadow-md:   0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg:   0 8px 24px rgba(0, 0, 0, 0.12);
  --shadow-red:  0 4px 14px rgba(231, 49, 55, 0.3);
  --shadow-yellow: 0 4px 14px rgba(255, 221, 0, 0.4);

  /* ── Transitions ──────────────────────────────────────────── */
  --transition-fast:   0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-slow:   0.4s ease;

  /* ── Z-index stack ────────────────────────────────────────── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-modal:    200;
  --z-toast:    300;
}

/* ── Dark Theme Overrides ───────────────────────────────────── */
html[data-theme="dark"] {
  /* Surfaces & Backgrounds */
  --color-bg:                  #111214;
  --color-surface:             #1a1c1f;
  --color-surface-alt:         #1f2124;
  --color-surface-hover:       #26292e;
  --color-border:              #2e3136;
  --color-border-strong:       #3d4249;

  /* Text */
  --color-text-primary:        #f0f2f4;
  --color-text-secondary:      #9aa0a8;
  --color-text-muted:          #5a6270;
  --color-text-inverse:        #ffffff;
  --color-text-on-yellow:      #111214;

  /* Message bubbles */
  --color-bubble-user-bg:      #2a1617;
  --color-bubble-user-border:  var(--color-incibe-red);
  --color-bubble-user-text:    #f0f2f4;
  --color-bubble-ai-bg:        #1f2124;
  --color-bubble-ai-text:      #f0f2f4;

  /* Shadows */
  --shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-md:   0 4px 16px rgba(0, 0, 0, 0.6);
  --shadow-lg:   0 8px 32px rgba(0, 0, 0, 0.7);
  --shadow-red:  0 0 24px rgba(231, 49, 55, 0.25);
  --shadow-yellow: 0 0 24px rgba(255, 221, 0, 0.15);
}