/* ============================================================
   SAGE 2.0 · Design tokens
   Fuente única de verdad visual. Los nombres --sage-* se
   mantienen para que todas las pantallas hereden el rediseño;
   el tema oscuro redefine solo los valores (html[data-theme]).
   ============================================================ */
:root {
  color-scheme: light;

  /* ---- Marca ---- */
  --sage-primary: #003048;
  --sage-primary-medium: #184878;
  --sage-teal: #186078;
  --sage-accent: #1b7f7f;          /* turquesa AA con blanco: botón principal */
  --sage-accent-hi: #30a8a8;       /* hover y anillo de foco */
  --sage-accent-strong: #1b7f7f;
  --sage-accent-soft: #ddf0ef;
  --sage-on-accent: #ffffff;
  --sage-dark: #001830;
  --sage-light: #f2f5f7;           /* fondo de la aplicación */

  /* ---- Superficies y bordes ---- */
  --sage-surface: #ffffff;
  --sage-surface-alt: #f8fafb;
  --sage-sunken: #e9eff3;
  --sage-hover: #eef4f6;
  --sage-border: #d9e2e9;
  --sage-border-soft: #e7edf1;
  --sage-border-strong: #c3d2de;

  /* ---- Texto ---- */
  --sage-text: #152331;
  --sage-text-strong: #0c1824;
  --sage-muted: #5a6c7d;
  --sage-label: #425568;
  --sage-heading: #0c1824;

  /* ---- Menú lateral (oscuro en ambos temas) ---- */
  --sage-side: #0a2233;
  --sage-side-2: #0f2d42;
  --sage-side-ink: #d6e4ee;
  --sage-side-ink-2: #8fa9bd;
  --sage-side-active: #15405a;

  /* ---- Semánticos (sólido / suave, contraste AA) ---- */
  --sage-success: #0a6e5c;
  --sage-success-soft: #e0f2ec;
  --sage-danger: #b3261e;
  --sage-danger-soft: #fbe9e7;
  --sage-warning: #8a5200;
  --sage-warning-soft: #fbf0dc;
  --sage-info: #0f5e79;
  --sage-info-soft: #e2f0f5;
  --sage-neutral: #41566a;
  --sage-neutral-soft: #eaf0f5;

  /* ---- Color por grupo de módulos (solo punto y barra activa) ---- */
  --sage-m-conta: #1b7f7f;
  --sage-m-oper: #4a5fc1;
  --sage-m-fin: #a0620a;
  --sage-m-pers: #8a4fa0;
  --sage-m-conf: #5b6b7c;

  /* ---- Tipografía ---- */
  --sage-font: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --sage-font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, "SF Mono", monospace;
  --sage-fs-2xs: 0.6875rem;
  --sage-fs-xs: 0.75rem;
  --sage-fs-sm: 0.8125rem;
  --sage-fs-base: 0.875rem;
  --sage-fs-md: 0.875rem;
  --sage-fs-lg: 1rem;
  --sage-fs-xl: 1.25rem;
  --sage-fs-2xl: 1.5rem;
  --sage-fs-3xl: 1.625rem;

  /* ---- Espacios (escala 4px) ---- */
  --sage-space-1: 0.25rem;
  --sage-space-2: 0.5rem;
  --sage-space-3: 0.75rem;
  --sage-space-4: 1rem;
  --sage-space-5: 1.5rem;
  --sage-space-6: 2rem;

  /* ---- Radios ---- */
  --sage-radius-card: 10px;
  --sage-radius: 10px;
  --sage-radius-control: 8px;
  --sage-radius-sm: 6px;
  --sage-radius-pill: 999px;

  /* ---- Elevación ---- */
  --sage-shadow: 0 1px 2px rgba(0, 24, 48, 0.06), 0 4px 14px rgba(0, 24, 48, 0.08);
  --sage-shadow-e1: 0 1px 2px rgba(0, 24, 48, 0.05), 0 2px 8px rgba(0, 24, 48, 0.06);
  --sage-shadow-e2: 0 2px 4px rgba(0, 24, 48, 0.06), 0 6px 18px rgba(0, 24, 48, 0.10);
  --sage-shadow-e3: 0 12px 40px rgba(0, 24, 48, 0.22);

  /* ---- Foco ---- */
  --sage-focus-color: var(--sage-accent-hi);
  --sage-focus-ring: 0 0 0 3px var(--sage-accent-soft);

  /* ---- Medidas del shell y densidad ---- */
  --sage-sidebar-width: 252px;
  --sage-topbar-height: 60px;
  --sage-row: 44px;

  /* ---- Movimiento ---- */
  --sage-transition-fast: 120ms cubic-bezier(0.2, 0, 0, 1);
  --sage-transition: 160ms cubic-bezier(0.2, 0, 0, 1);
  --sage-transition-slow: 220ms cubic-bezier(0.2, 0, 0, 1);

  /* ---- Compatibilidad con estilos anteriores ---- */
  --sage-gradient-brand: linear-gradient(140deg, #30a8a8 0%, #184878 100%);
  --sage-gradient-accent: linear-gradient(140deg, #30a8a8 0%, #184878 100%);
  --sage-gradient-sheen: none;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --sage-primary: #8cc7dd;
  --sage-primary-medium: #9fb8dc;
  --sage-teal: #6fb8c9;
  --sage-accent: #46bdb8;
  --sage-accent-hi: #6fd3cf;
  --sage-accent-strong: #46bdb8;
  --sage-accent-soft: #113533;
  --sage-on-accent: #04201f;
  --sage-dark: #e2eaf0;
  --sage-light: #0a131a;

  --sage-surface: #101c26;
  --sage-surface-alt: #13212d;
  --sage-sunken: #0c1720;
  --sage-hover: #172a38;
  --sage-border: #22374a;
  --sage-border-soft: #1b2d3d;
  --sage-border-strong: #2d465c;

  --sage-text: #e2eaf0;
  --sage-text-strong: #f2f6f9;
  --sage-muted: #8a9eaf;
  --sage-label: #a8b9c7;
  --sage-heading: #f2f6f9;

  --sage-side: #07121a;
  --sage-side-2: #0c1a25;
  --sage-side-ink: #d2dfe8;
  --sage-side-ink-2: #7f98ab;
  --sage-side-active: #123247;

  --sage-success: #5fcaa9;
  --sage-success-soft: #10302a;
  --sage-danger: #f08b83;
  --sage-danger-soft: #3a1a18;
  --sage-warning: #e8b15d;
  --sage-warning-soft: #352812;
  --sage-info: #7cc3de;
  --sage-info-soft: #112e3a;
  --sage-neutral: #a8b9c7;
  --sage-neutral-soft: #1a2a37;

  --sage-m-conta: #46bdb8;
  --sage-m-oper: #8e9ff0;
  --sage-m-fin: #e0a24a;
  --sage-m-pers: #c996dc;
  --sage-m-conf: #9aabbb;

  --sage-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35);
  --sage-shadow-e1: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3);
  --sage-shadow-e2: 0 2px 4px rgba(0, 0, 0, 0.4), 0 6px 18px rgba(0, 0, 0, 0.4);
  --sage-shadow-e3: 0 12px 40px rgba(0, 0, 0, 0.6);
}

html.compacto {
  --sage-row: 34px;
}