/* Tokens de tema — sistema de diseño 4d3 (Cuatro de Tres).
   Tríada pastel verde → azul → coral, tipografía editorial,
   esquinas vivas (radios 0–4px) y transición de 300ms. */

:root {
  /* Tríada pastel — primarios */
  --pastel-green: #8BC990;
  --pastel-blue:  #7BA3D8;
  --pastel-coral: #E8837B;
  --dark-green:   #5A9960;
  --dark-blue:    #5B83B8;
  --dark-coral:   #C8635B;

  /* Neutros */
  --white:        #FFFFFF;
  --off-white:    #FAFAFA;
  --gray-light:   #E8E8E8;
  --gray-mid:     #888888;
  --gray-dark:    #333333;

  /* Tokens semánticos (consumidos por el resto del CSS) */
  --bg:           var(--off-white);
  --bg-elev:      var(--white);
  --bg-sunken:    #F3F3F3;
  --fg:           var(--gray-dark);
  --fg-muted:     var(--gray-mid);
  --fg-subtle:    #B0B0B0;
  --border:       var(--gray-light);
  --border-strong:#D0D0D0;

  /* Accent principal: azul pastel (CTA por defecto) */
  --accent:        var(--pastel-blue);
  --accent-fg:     var(--white);
  --accent-soft:   rgba(123, 163, 216, 0.12);
  --accent-strong: var(--dark-blue);

  /* Modo Profesional: coral pastel (antes naranja) */
  --accent-pro:        var(--pastel-coral);
  --accent-pro-soft:   rgba(232, 131, 123, 0.12);
  --accent-pro-strong: var(--dark-coral);

  /* Modo Normal: verde pastel */
  --accent-normal:        var(--pastel-green);
  --accent-normal-soft:   rgba(139, 201, 144, 0.14);
  --accent-normal-strong: var(--dark-green);

  /* Estados */
  --danger:      var(--dark-coral);
  --danger-soft: rgba(200, 99, 91, 0.12);
  --warning:     var(--dark-coral);
  --success:     var(--dark-green);

  /* Burbujas de chat */
  --bubble-user: rgba(123, 163, 216, 0.18);
  --bubble-iris: var(--white);

  /* Código */
  --code-bg: var(--gray-dark);
  --code-fg: var(--off-white);

  /* Forma */
  --radius-sm: 0;
  --radius-md: 4px;
  --radius-lg: 4px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.08);

  /* Movimiento */
  --transition: 300ms ease;

  /* Tipografía */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --bg:           var(--gray-dark);
  --bg-elev:      #2A2A2A;
  --bg-sunken:    #1F1F1F;
  --fg:           var(--off-white);
  --fg-muted:     #B0B0B0;
  --fg-subtle:    #707070;
  --border:       rgba(255, 255, 255, 0.08);
  --border-strong:rgba(255, 255, 255, 0.16);

  --accent-soft:        rgba(123, 163, 216, 0.18);
  --accent-pro-soft:    rgba(232, 131, 123, 0.18);
  --accent-normal-soft: rgba(139, 201, 144, 0.18);

  --bubble-user: rgba(123, 163, 216, 0.22);
  --bubble-iris: rgba(255, 255, 255, 0.04);

  --code-bg: #1A1A1A;
  --code-fg: var(--off-white);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           var(--gray-dark);
    --bg-elev:      #2A2A2A;
    --bg-sunken:    #1F1F1F;
    --fg:           var(--off-white);
    --fg-muted:     #B0B0B0;
    --fg-subtle:    #707070;
    --border:       rgba(255, 255, 255, 0.08);
    --border-strong:rgba(255, 255, 255, 0.16);

    --accent-soft:        rgba(123, 163, 216, 0.18);
    --accent-pro-soft:    rgba(232, 131, 123, 0.18);
    --accent-normal-soft: rgba(139, 201, 144, 0.18);

    --bubble-user: rgba(123, 163, 216, 0.22);
    --bubble-iris: rgba(255, 255, 255, 0.04);

    --code-bg: #1A1A1A;
    --code-fg: var(--off-white);

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 10px 40px rgba(0, 0, 0, 0.5);
  }
}