/* NetBlu Support · Tokens de marca e interfaz · v0.1 (15 oct 2026)
   Fuente única de colores, tipografía y forma. La usan el guideline, la propuesta y, más adelante, la aplicación.
   Regla: los componentes usan los tokens de interfaz (--primary, --fg…), no los colores de marca directamente. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/montserrat-latin-var.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/montserrat-latin-italic-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/ibmplexmono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/ibmplexmono-latin-500.woff2") format("woff2"); }

:root {
  /* Marca: valores oficiales, no se modifican */
  --brand-blue: #001689;
  --brand-green: #95D600;
  --brand-white: #FFFFFF;

  /* Tipografía */
  --font-sans: "Montserrat", "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, "Courier New", monospace;

  /* Interfaz · tema claro */
  --bg: #F5F6FA;
  --surface: #FFFFFF;
  --surface-alt: #EEF0F7;
  --fg: #0D1338;
  --muted: #4F5677;
  --line: #D8DCEB;
  --primary: var(--brand-blue);   /* acciones principales, enlaces, navegación activa */
  --primary-soft: #E6E9F7;
  --on-primary: var(--brand-white);
  --accent: var(--brand-green);   /* acentos y detalles; nunca como texto sobre fondo claro */
  --accent-soft: #F0F8DC;
  --accent-ink: #3F6B00;          /* verde legible para texto sobre fondo claro */
  --on-accent: var(--brand-blue);
  --focus: var(--brand-blue);

  /* Estados de ticket */
  --st-new: #4F5677;
  --st-progress: var(--brand-blue);
  --st-waiting: #A35A00;
  --st-resolved: #3F6B00;
  --st-closed: #2B3150;
  --st-cancelled: #B42318;

  /* Forma */
  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0A0F2E;
    --surface: #111843;
    --surface-alt: #182055;
    --fg: #E8EAF5;
    --muted: #A6ACCB;
    --line: #2A3266;
    --primary: #8FA0FF;
    --primary-soft: #1B2462;
    --on-primary: #0A0F2E;
    --accent-soft: #1F2E14;
    --accent-ink: var(--brand-green);
    --focus: var(--brand-green);
    --st-new: #B9C0DD;
    --st-progress: #8FA0FF;
    --st-waiting: #F2B45C;
    --st-resolved: var(--brand-green);
    --st-closed: #C8CDE3;
    --st-cancelled: #F28B82;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0A0F2E;
  --surface: #111843;
  --surface-alt: #182055;
  --fg: #E8EAF5;
  --muted: #A6ACCB;
  --line: #2A3266;
  --primary: #8FA0FF;
  --primary-soft: #1B2462;
  --on-primary: #0A0F2E;
  --accent-soft: #1F2E14;
  --accent-ink: var(--brand-green);
  --focus: var(--brand-green);
  --st-new: #B9C0DD;
  --st-progress: #8FA0FF;
  --st-waiting: #F2B45C;
  --st-resolved: var(--brand-green);
  --st-closed: #C8CDE3;
  --st-cancelled: #F28B82;
  color-scheme: dark;
}