/* M360 Sales Intelligence · tokens de diseño
   Paleta oficial Mandora 360: negro profundo, azul eléctrico, plata. */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Negro profundo */
  --ink-950: #02070D;
  --ink-900: #08111D;
  --ink-800: #111C2B;
  --ink-700: #1D2A3C;
  --ink-600: #2C3B50;

  /* Plata */
  --silver-50:  #F6F8FA;
  --silver-100: #EFF2F6;
  --silver-200: #E3E8EE;
  --silver-300: #CDD5DF;
  --silver-400: #A6B1BF;
  --silver-500: #7C889A;
  --silver-600: #5B6779;

  /* Azul eléctrico */
  --blue-700: #0F4FD6;
  --blue-600: #1C64FF;
  --blue-500: #3E7DFF;
  --blue-300: #8FB4FF;
  --blue-100: #E4EDFF;
  --blue-50:  #F1F5FF;

  /* Estados */
  --ok-700: #0B7A53;  --ok-50: #E6F5EE;
  --warn-700: #93580A; --warn-50: #FCF1DF;
  --bad-700: #B4353A;  --bad-50: #FBEAEA;
  --muted-700: #4E596A; --muted-50: #EDF0F4;

  /* Roles semánticos */
  --bg: var(--silver-100);
  --surface: #FFFFFF;
  --surface-sunken: var(--silver-50);
  --line: var(--silver-200);
  --line-strong: var(--silver-300);
  --text: #0D1624;
  --text-2: #465265;
  --text-3: #6A7587;
  --accent: var(--blue-600);
  --accent-hover: var(--blue-700);
  --on-ink: #E9EEF4;
  --on-ink-2: #9AA8BA;

  /* Tipografía */
  --font: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-15: 0.9375rem;
  --fs-17: 1.0625rem;
  --fs-20: 1.25rem;
  --fs-26: 1.625rem;
  --fs-34: 2.125rem;

  /* Espacio y forma */
  --r-ctl: 8px;
  --r-panel: 14px;
  --r-sheet: 18px;
  --focus-ring: 0 0 0 3px rgba(28, 100, 255, 0.32);
  --shadow-pop: 0 18px 48px rgba(2, 7, 13, 0.22), 0 2px 6px rgba(2, 7, 13, 0.08);

  --rail-w: 248px;
  --topbar-h: 56px;
  --tabbar-h: 62px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}