/* ============================================================
   SpineNet · Tokens de diseño
   Colores de la marca SpineNet (hoja de marca):
     petróleo  #00404c   turquesa  #1a8788   realce  #00595f
   Fondo gris muy claro, barra lateral blanca, tarjetas blancas con
   borde fino. Tipografía: Proxima Nova (si está instalada) o Metropolis.
   ============================================================ */

:root {
  color-scheme: light;

  /* ---- Marca (los nombres --mt-* se conservan: los usa todo el sistema) ---- */
  --mt-navy-900: #00404c;
  --mt-navy-850: #003a45;
  --mt-navy-800: #1f5761;
  --mt-navy-700: #2e626c;
  --mt-navy-600: #42727b;
  --mt-navy-500: #5b8790;
  --mt-navy-400: #7fa3aa;
  --mt-navy-200: #c3d6d9;
  --mt-navy-100: #e3eeef;
  --mt-navy-050: #f1f7f7;

  --mt-orange-700: #0f5253;
  --mt-orange-600: #167273;
  --mt-orange-500: #1a8788;
  --mt-orange-400: #3f9a9b;
  --mt-orange-300: #5fabac;
  --mt-orange-100: #e3f1f1;
  --mt-orange-050: #f1f8f8;

  --mt-gold-500: #e0a526;
  --mt-gold-300: #f2cf7d;
  --mt-gold-100: #fdf4de;

  /* ---- Superficies ---- */
  --bg-app: #f3f5f5;
  --bg-surface: #ffffff;
  --bg-elevated: #ffffff;
  --bg-muted: #f7f9f9;
  --bg-inset: #eef2f2;
  --bg-nav: #ffffff;
  --bg-nav-active: rgba(26, 135, 136, 0.09);
  --bg-nav-hover: #f2f5f5;
  --scrim: rgba(12, 30, 34, 0.38);

  --border: #e6eaea;
  --border-strong: #d3d9da;
  --border-nav: #e8ecec;

  /* ---- Texto ---- */
  --text-primary: #102327;
  --text-secondary: #4b5c60;
  --text-muted: #7a888b;
  --text-inverse: #ffffff;
  --text-nav: #3d4d51;
  --text-nav-active: #13696a;
  --text-brand: #177a7a;

  /* ---- Marca aplicada ---- */
  --brand: #1a8788;
  --brand-hover: #167273;
  --brand-soft: rgba(26, 135, 136, 0.1);
  --brand-ink: #0f5253;
  --brand-ring: rgba(26, 135, 136, 0.2);
  --accent: #00404c;
  --accent-soft: rgba(0, 64, 76, 0.08);
  --gold: #00595f;

  /* ---- Estados ---- */
  --ok: #1f9d62;
  --ok-soft: #e7f6ee;
  --ok-ink: #13744a;
  --warn: #d48806;
  --warn-soft: #fdf3e1;
  --warn-ink: #8a5700;
  --danger: #d64545;
  --danger-soft: #fdecec;
  --danger-ink: #a52d2d;
  --info: #3b6b8f;
  --info-soft: #eaf1f7;
  --info-ink: #24506f;
  --neutral-soft: #eff2f2;
  --neutral-ink: #4b5c60;

  /* ---- Datos / gráficas ---- */
  --c1: #1a8788;
  --c2: #00404c;
  --c3: #e0a526;
  --c4: #5f7d95;
  --c5: #8cc8c7;
  --c6: #a86b8c;
  --c7: #3aa876;
  --c8: #9aa5a8;
  --grid: #edf0f0;
  --bar-muted: #e4eaea;

  /* ---- Forma ---- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r: 10px;
  --r-lg: 14px;
  --r-xl: 18px;
  --r-full: 999px;

  --sh-1: 0 1px 2px rgba(16, 35, 39, 0.04);
  --sh-2: 0 1px 2px rgba(16, 35, 39, 0.05), 0 6px 16px -4px rgba(16, 35, 39, 0.08);
  --sh-3: 0 24px 48px -12px rgba(16, 35, 39, 0.22), 0 4px 12px rgba(16, 35, 39, 0.06);
  --sh-nav: none;

  /* ---- Tipografía ---- */
  /* Proxima Nova es la tipografía del manual de marca. Si está instalada
     en el equipo se usa tal cual; si no, entra Metropolis, servida desde
     /fonts (css/tipografia.css), que respeta las mismas proporciones. */
  --font: "Proxima Nova", "Proxima Nova Alt", "Metropolis", "Avenir Next",
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;

  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-15: 15px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-24: 24px;
  --fs-30: 30px;
  --fs-38: 38px;

  /* ---- Espaciado ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 32px;
  --s-8: 40px;
  --s-9: 56px;

  /* ---- Layout ---- */
  --nav-w: 252px;
  --nav-w-collapsed: 76px;
  --topbar-h: 68px;
  --maxw: 1560px;

  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   Tema oscuro — mismos roles, sobre un gris petróleo casi negro
   ============================================================ */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: #0b1113;
  --bg-surface: #111a1c;
  --bg-elevated: #162124;
  --bg-muted: #141e20;
  --bg-inset: #1a2629;
  --bg-nav: #111a1c;
  --bg-nav-active: rgba(38, 166, 167, 0.15);
  --bg-nav-hover: #172225;
  --scrim: rgba(0, 0, 0, 0.55);

  --border: #1f2c2f;
  --border-strong: #2d3c40;
  --border-nav: #1f2c2f;

  --text-primary: #e7eeef;
  --text-secondary: #a9b7ba;
  --text-muted: #7f8e91;
  --text-inverse: #0b1113;
  --text-nav: #b3c1c3;
  --text-nav-active: #7fd0cf;
  --text-brand: #6cc2c1;

  --brand: #1a8788;
  --brand-hover: #22a0a1;
  --brand-soft: rgba(38, 166, 167, 0.16);
  --brand-ink: #86d3d2;
  --brand-ring: rgba(38, 166, 167, 0.3);
  --accent: #6fb7bb;
  --accent-soft: rgba(111, 183, 187, 0.14);

  --ok: #3cc98a;
  --ok-soft: rgba(60, 201, 138, 0.14);
  --ok-ink: #72dcac;
  --warn: #f0b44c;
  --warn-soft: rgba(240, 180, 76, 0.14);
  --warn-ink: #f6ca7c;
  --danger: #f07575;
  --danger-soft: rgba(240, 117, 117, 0.15);
  --danger-ink: #ff9f9f;
  --info: #7fb0d6;
  --info-soft: rgba(127, 176, 214, 0.15);
  --info-ink: #aacbe6;
  --neutral-soft: #1a2629;
  --neutral-ink: #a9b7ba;

  --c1: #2fb0b0;
  --c2: #8fd3d2;
  --c3: #f0b44c;
  --c4: #86a6c0;
  --c5: #3f7f83;
  --c6: #cf94b3;
  --c7: #57c98f;
  --c8: #8e9a9d;
  --grid: #1c282b;
  --bar-muted: #22302f;

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sh-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 20px -6px rgba(0, 0, 0, 0.45);
  --sh-3: 0 24px 48px -12px rgba(0, 0, 0, 0.65), 0 4px 12px rgba(0, 0, 0, 0.4);
}