/* BaseForum — Design tokens
   Fuente de verdad única. Nunca sobreescribir aquí desde otros CSS.
   Adaptado del prototipo Claude Design (styles/tokens.css)
*/

/* Las tipografías se sirven desde este mismo servidor (static/fonts/fuentes.css),
   enlazado en el <head> de cada página. Antes se importaban de Google. */

:root {
  /* ── Paleta de marca (manual de identidad BaseForum) ── */
  --bf-rojo:    #C8102E;   /* Rojo España */
  --bf-gualda:  #F2B700;   /* Gualda */
  --bf-marino:  #0A2240;   /* Marino USA */
  --bf-azul:    #007CBA;   /* Azul corporativo BaseForum */
  /* Rojo de marca oscurecido para usarlo como TEXTO pequeño sobre fondos
     claros: el #C8102E cumple sobre crema pero queda al límite sobre el fondo
     hundido/hover; este da 8:1 en crema, blanco y hundido, y sigue leyéndose
     como el rojo de la identidad. Para rellenos y gráficos se usa --bf-rojo. */
  --bf-rojo-texto: #93101E;

  /* ── Tema claro (por defecto) ── */
  --bf-bg:          #F4F1EA;
  --bf-bg-elev:     #FFFFFF;
  --bf-bg-sunken:   #ECE7DD;
  --bf-ink:         #14171C;
  --bf-ink-2:       #3A4049;
  /* #6B7280 daba 4,29:1 sobre el fondo crema, por debajo del 4,5:1 que exige
     WCAG 2.1 AA para texto pequeño (eyebrows, pies, metadatos). Este tono da
     4,92:1 sobre crema, 5,54:1 sobre blanco y 4,50:1 sobre el fondo hundido. */
  --bf-ink-3:       #626973;
  --bf-line:        rgba(20, 23, 28, 0.12);
  --bf-line-soft:   rgba(20, 23, 28, 0.06);

  /* ── Acento (marino por defecto) ── */
  --bf-accent:     var(--bf-marino);
  --bf-accent-ink: #FFFFFF;

  /* ── Tipografía ── */
  --bf-font-display: 'Oswald', Impact, sans-serif;
  --bf-font-body:    'Inter', system-ui, sans-serif;
  --bf-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ── Espaciado (escala 4px) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* ── Radios ── */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-full: 999px;

  /* ── Sombras ── */
  --shadow-sm: 0 1px 2px rgba(10,34,64,0.06);
  --shadow-md: 0 8px 24px rgba(10,34,64,0.10);
  --shadow-lg: 0 24px 60px rgba(10,34,64,0.18);

  /* ── Iconos ── */
  --icon-size-md:  20px;
  --icon-size-nav: 24px;
  --stroke-icon:   1.75;

  /* ── Motion ── */
  --motion-base: 180ms;
  --ease-out:    cubic-bezier(0.0, 0.0, 0.2, 1);

  /* ── Z-index ── */
  --z-header:  10;
  --z-drawer:  20;
  --z-popup:   30;
  --z-tooltip: 40;

  /* ── Layout ── */
  --app-max-width:  1280px;
  /* Cabecera y pie: banda deliberadamente MÁS ancha que el contenido, para que
     respiren de los bordes sin encerrarse tanto como el texto. */
  --app-max-width-bar: 1600px;
  --app-padding-x:  56px;
  --app-padding-mob: 18px;

  /* ── Densidad (normal por defecto) ── */
  --bf-gap:    16px;
  --bf-gap-lg: 24px;

  /* ── Variantes oscuras de marca ── */
  --bf-rojo-dark:   #a50d24;
  --bf-marino-dark: #061829;
  --bf-gualda-dark: #A07800;
  --bf-white:       #FFFFFF;

  /* ── Fondos tintados por color de bloque ── */
  --bf-rojo-bg:    #FAE9EC;
  --bf-marino-bg:  #E5EBF3;
  --bf-azul-bg:    #E0E9F8;
  --bf-gualda-bg:  #FEF7DC;
  --bf-gualda-ink: #1A1200;

  /* ── Overlays y capas semitransparentes ── */
  --overlay-dark:     rgba(10,34,64,0.55);
  --overlay-backdrop: rgba(0,0,0,0.40);
  --overlay-badge:    rgba(0,0,0,0.70);
  --bf-line-on-dark:  rgba(255,255,255,0.50);

  /* ── Sombras específicas ── */
  --shadow-play:           0 4px 14px rgba(200,16,46,0.35);
  --shadow-hotspot:        0 0 0 2px rgba(242,183,0,0.35), 0 2px 6px rgba(0,0,0,0.30);
  --shadow-hotspot-active: 0 0 0 3px rgba(200,16,46,0.40), 0 2px 10px rgba(0,0,0,0.40);

  /* ── Duraciones de animación ── */
  --duration-fast:   150ms;
  --duration-normal: 200ms;
  --duration-slow:   300ms;

  /* ── Fondo placeholder oscuro ── */
  --bf-placeholder-dark-bg: #1a1f27;
}

/* ── Tema oscuro ── */
[data-theme="dark"] {
  --bf-bg:        #0D0F13;
  --bf-bg-elev:   #161A21;
  --bf-bg-sunken: #090B0F;
  --bf-ink:       #F2EFE8;
  --bf-ink-2:     #B5BAC4;
  --bf-ink-3:     #7C838F;
  --bf-line:      rgba(255,255,255,0.10);
  --bf-line-soft: rgba(255,255,255,0.05);
  --bf-accent:     var(--bf-gualda);
  --bf-accent-ink: #0D0F13;
}

/* ── Densidad compacta ── */
[data-density="compact"] {
  --bf-gap:    12px;
  --bf-gap-lg: 18px;
}

/* ── Densidad amplia ── */
[data-density="roomy"] {
  --bf-gap:    22px;
  --bf-gap-lg: 32px;
}