/* Tokens de diseño (docs/design/ui.md §4). Paleta B · Grafito, aprobada por el owner el 2026-10-15.
   Los componentes usan solo los roles semánticos (--color-*, --ok-*, --warn-*, --bad-*).
   Contrastes WCAG 2.2 medidos sobre --color-bg o --color-surface, salvo que se indique otra cosa. */
:root {
  /* Marca */
  --color-brand: #25272c;          /* grafito: botones, enlaces, pestaña activa · 14,9:1 con blanco */
  --color-brand-hover: #3a3d44;
  --color-on-brand: #ffffff;
  --color-selected: #e4e1da;       /* elemento activo · marca sobre él 11,4:1 */
  --color-bubble: #eeebe5;         /* burbuja de la pregunta */
  --color-tint2: #d6d2c8;
  --color-accent: #ff7a1a;         /* mandarina: SOLO relleno con texto en tinta (6,2:1), nunca texto */
  --color-accent-hover: #e8630a;
  --color-accent-text: #a34508;    /* naranja para texto: ≥ 4,5:1 en papel, barra lateral y blanco */
  --color-on-accent: #1f2024;
  --color-focus: #25272c;
  --color-hover: rgb(37 39 44 / 0.06);

  /* Neutros (papel cálido) */
  --color-bg: #f7f6f3;
  --color-sidebar: #efede8;
  --color-surface: #ffffff;
  --color-border: #e3e0d9;         /* separadores (decorativo) */
  --color-border-strong: #8c8880;  /* bordes de inputs · 3,5:1 sobre blanco (WCAG 1.4.11) */
  --color-text: #1f2024;
  --color-text-muted: #4b4a47;     /* 8,2:1 */
  --color-text-subtle: #6b6964;    /* 5,1:1; ≥ 4,5:1 también sobre --color-sidebar */

  /* Estados */
  --ok-bg: #e5f2ea;   --ok-fg: #1f6b45;    /* 5,6:1 */
  --ok-border: #c4e2cf;
  --warn-bg: #fdf0dc; --warn-fg: #8f4f06;  /* 5,7:1 */
  --warn-border: #f3cf9c;
  --bad-bg: #fbeaea;  --bad-fg: #b3261e;   /* 5,6:1; botón de peligro: blanco sobre él 6,5:1 */
  --bad-fg-hover: #8f1d17;
  --bad-border: #f1c9c6;

  /* Series de los gráficos de informes (≥ 3:1 sobre blanco, WCAG 1.4.11) */
  --chart-1: #25272c;  /* grafito */
  --chart-2: #e8630a;  /* mandarina oscura, 3,4:1 */
  --chart-3: #2f6f8f;  /* azul pizarra, 5,6:1 */

  /* Bloques de código (snippets de MCP Connect) */
  --color-code-bg: #1f2024;
  --color-code-fg: #f7f6f3;
  --color-code-border: #3a3d44;
  --color-code-btn: #2e3036;

  /* Tipografía (las familias las define next/font en layout.tsx) */
  --text-xs: 12px;   --text-sm: 13px;   --text-base: 15px;  --text-md: 16px;
  --text-lg: 18px;   --text-xl: 22px;   --text-2xl: 28px;   --text-3xl: 36px;
  --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700;

  /* Espaciado: base 4 px */
  --space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
  --space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
  --space-12: 48px; --space-16: 64px;

  /* Radios */
  --radius-sm: 6px;      /* code, chips cuadrados */
  --radius-md: 8px;      /* botones */
  --radius-input: 12px;  /* inputs, elementos de navegación */
  --radius-card: 16px;   /* tarjetas, tarjeta de aprobación */
  --radius-bubble: 18px; /* burbuja del usuario, compositor */
  --radius-full: 999px;  /* chips, insignias, pestañas */

  /* Sombras: casi plano, como Perplexity */
  --shadow-subtle: 0 1px 2px rgb(31 32 36 / 0.08);
  --shadow-lg: 0 16px 40px rgb(31 32 36 / 0.16);
  --glow: 0 0 0 4px rgb(255 122 26 / 0.18);

  /* Disposición */
  --sidebar-w: 248px;  --rail-w: 64px;  --convs-w: 280px;
  --topbar-h: 56px;    --content-max: 1200px;  --reading-max: 920px;

  /* Movimiento */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;  --dur-base: 200ms;

  /* Capas */
  --z-sticky: 10;  --z-drawer: 40;  --z-toast: 50;
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; }
}

/* Alias de los nombres anteriores (copiados de la landing). Los estilos existentes, y los que añade
   la sesión de lógica al final de globals.css, siguen funcionando con la paleta nueva. Se retiran
   cuando ningún estilo los use. */
:root {
  --ink: var(--color-text);
  --ink-soft: var(--color-text-muted);
  --meta: var(--color-text-subtle);
  --paper: var(--color-bg);
  --card: var(--color-surface);
  --line: var(--color-border);
  --accent: var(--color-brand);
  --accent-deep: var(--color-brand-hover);
  --accent-wash: var(--color-selected);
  --ok: var(--ok-fg);
  --ok-wash: var(--ok-bg);
  --pending: var(--warn-fg);
  --pending-wash: var(--warn-bg);
  --danger: var(--bad-fg);
  --danger-wash: var(--bad-bg);
  --radius: 10px;
}