/* RedgeSats — Design tokens (fuente de verdad de color, tipografía, espaciado y tamaños).
   Los hex viven SOLO aquí. Las vistas y el resto del CSS referencian roles. */
:root {
  /* color roles */
  --bg-app:#F4F5F7; --bg-surface:#FFFFFF; --bg-subtle:#F8F9FB; --bg-hover:#EEF1F5; --bg-selected:#E8EEF8;
  --border:#E1E4EA; --border-strong:#C6CBD4;
  --text:#1B1F27; --text-2:#4B5563; --text-3:#6B7280; --text-inverse:#FFFFFF;
  --accent:#2456A6; --accent-hover:#1C4689; --accent-soft:#E4ECF8;
  --success:#1E7B4E; --success-soft:#E3F3EA;
  --warning:#8A5A00; --warning-soft:#FFF3D6;
  --danger:#B42318;  --danger-soft:#FBE9E7;
  --neutral-soft:#EEF0F3;
  --focus:0 0 0 2px #FFFFFF, 0 0 0 4px var(--accent);

  /* type */
  --font:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-20:20px;
  --lh-tight:1.2; --lh-ui:1.3; --lh-text:1.45;

  /* space */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:20px;

  /* radius */
  --r-ctl:3px; --r-panel:4px; --r-modal:6px;

  /* shadow (solo menús y modales) */
  --shadow-menu:0 4px 12px rgba(16,24,40,.12);
  --shadow-modal:0 12px 32px rgba(16,24,40,.18);

  /* sizes */
  --h-ctl:28px; --h-ctl-sm:24px; --h-row:32px; --h-row-compact:28px; --h-header:44px; --h-nav:40px;
  --w-split:380px; --w-filter-panel:320px; --w-side-max:420px; --w-hovercard:320px;

  /* layers */
  /* --z-widget: el widget de feedback flota sobre TODA la aplicación —diálogos incluidos,
     que es donde más falta hace reportar un fallo— pero por debajo de los avisos, para no
     tapar la confirmación de lo que acabas de hacer. Antes eran 99998/99999/100000 dentro
     del JavaScript: números elegidos para ganar siempre, fuera de toda escala. */
  --z-sticky:20; --z-menu:40; --z-modal:60; --z-widget:70; --z-toast:80;

  /* marca: el rojo REDGE solo vive aquí y solo se usa en el logotipo */
  --brand:#C8102E;

  /* puente con main.css (se retira cuando main.css desaparezca en la Fase 9) */
  --font-family: var(--font);
}

[data-theme="dark"] {
  --bg-app:#14171C; --bg-surface:#1B1F26; --bg-subtle:#20252D; --bg-hover:#262C36; --bg-selected:#22304A;
  --border:#2B313B; --border-strong:#3C4451;
  --text:#E8EAEE; --text-2:#B4BAC4; --text-3:#8B93A0; --text-inverse:#14171C;
  --accent:#7FA4E6; --accent-hover:#9DB9EC; --accent-soft:#213251;
  --success:#6FC79A; --success-soft:#1B3328;
  --warning:#E2B04E; --warning-soft:#3A2E14;
  --danger:#F08A7E;  --danger-soft:#3E1F1C;
  --neutral-soft:#2A2F38;
  --brand:#E04B5E;
  --focus:0 0 0 2px #1B1F26, 0 0 0 4px var(--accent);
}