/*
 * Catálogo --bf-* de RESPALDO para las páginas propias de Vor.
 *
 * VOR NO TIENE PALETA PROPIA. Esto no es un sistema de diseño nuevo: son los valores del catálogo
 * de Bifrost 3 (`bifrost-3/src/Dragsa.Bifrost.Host/wwwroot/css/tokens.css`), copiados para que la
 * pantalla se vea bien cuando el catálogo de la instalación todavía no llega. Si llega —clave
 * `Vor:Appearance:TokensUrl`—, se carga DESPUÉS de esta hoja y pisa lo que haga falta.
 *
 * QUÉ NO SE HACE AQUÍ, y es la parte que se rompe sola si nadie lo escribe:
 *   · No se inventa un token. Si hace falta un color que no está en el catálogo, la respuesta es
 *     una petición a Bifrost, no un `--vor-*` nuevo: en cuanto exista uno, la instalación que
 *     cambie su marca dejará de cambiar esa pieza y nadie sabrá por qué.
 *   · No se redefine un token del catálogo con otro valor. Esta hoja es el respaldo; el que manda
 *     es el de la instalación.
 *
 * Los convenios del sistema que se aplican en app.css:
 *   M-1  El naranja #ee7b24 es ACCIÓN y «aquí estás», en los dos temas. Un estado nunca es naranja.
 *   M-2  El color nunca va solo: LED más texto.
 *   M-4  Sin sombras. La elevación es contraste: filete y superficie.
 *   M-5  Una superficie por tarjeta; cabeceras y pies se separan con el filete.
 *   M-7  El tema oscuro solo cambia COLORES, nunca métrica. Por eso la métrica vive una sola vez.
 *  M-12  Todo control accionable lleva el filete de campo, más presente que el de las superficies.
 */

:root {
  color-scheme: light dark;

  /* Acento (M-1). Tres piezas: el relleno, el naranja legible como texto, y el texto SOBRE naranja. */
  --bf-accent: #ee7b24;
  --bf-accent-text: #d96a17;
  --bf-accent-fg: #ffffff;
  --bf-accent-soft: #fcefe3;

  /* Lateral pizarra: oscuro también en tema claro. */
  --bf-sidebar-bg: #2b3640;
  --bf-sidebar-fg: #e7edf2;
  --bf-sidebar-hover-bg: #39454f;
  --bf-sidebar-muted: #93a5b3;
  --bf-sidebar-line: rgba(255, 255, 255, 0.09);

  /* Superficies y filetes. --bf-panel-bg es el relleno HUNDIDO, solo para piezas interiores. */
  --bf-app-bg: #eef1f4;
  --bf-surface-bg: #ffffff;
  --bf-surface-fg: #1f2c36;
  --bf-panel-bg: #e8edf1;
  --bf-panel-fg: #1f2c36;
  --bf-header-bg: #ffffff;
  --bf-header-fg: #1f2c36;
  --bf-border: #dde4ea;
  --bf-border-soft: #eaeff3;

  /* Tinta. */
  --bf-muted: #647682;
  --bf-dim: #8d9ba7;

  /* El campo es un pozo (M-6/M-12). */
  --bf-field-bg: #ffffff;
  --bf-field-line: rgba(31, 44, 54, 0.25);

  /* El botón, con escala propia: el filete es quien carga el contraste, no el relleno. */
  --bf-button-bg: #f1f5f7;
  --bf-button-fg: var(--bf-surface-fg);
  --bf-button-line: rgba(31, 44, 54, 0.55);
  --bf-button-hover-bg: #e4eaee;
  --bf-button-press-bg: #d8e0e6;

  /* Semánticos (M-2): estado, nunca acción. */
  --bf-success: #1f7a4d;
  --bf-success-soft: #e4f2ea;
  --bf-warning: #a2680c;
  --bf-warning-soft: #f8eed8;
  --bf-danger: #b03a2f;
  --bf-danger-soft: #f8e5e3;
  --bf-info: #2f6fb0;
  --bf-info-soft: #e6eef7;

  --bf-hover: rgba(0, 0, 0, 0.05);
  --bf-active: rgba(0, 0, 0, 0.08);
  --bf-scrim: rgba(12, 22, 30, 0.34);

  /* Métrica (M-7: común a los dos temas). */
  --bf-radius-s: 6px;
  --bf-radius-m: 8px;
  --bf-radius-l: 12px;

  --bf-font-family: "Rubik", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bf-font-mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
  --bf-font-size: 16px;
  --bf-body-font-size: 14px;
  --bf-title-font-size: 21px;
  --bf-panel-title-font-size: 14.5px;
  --bf-sidebar-font-size: 13px;
  --bf-legend-font-size: 12px;

  --bf-button-font-size: 13px;
  --bf-button-font-size-small: 12px;
  --bf-button-radius: var(--bf-radius-m);
  --bf-button-padding: 0 14px;
  --bf-button-height: 34px;
  --bf-field-font-size: 13.5px;
  --bf-field-padding: 0 12px;
  --bf-field-height: 36px;
  --bf-field-radius: var(--bf-radius-m);

  --bf-tap-size: 44px;
  --bf-tap-gap: 8px;

  --bf-table-header-font-size: 10px;
  --bf-table-header-height: 34px;
  --bf-table-row-font-size: 13px;
  --bf-table-row-radius: var(--bf-radius-s);
  --bf-panel-radius: var(--bf-radius-l);
  --bf-panel-padding: 12px;
  --bf-panel-font-size: 13px;

  --bf-shadow: none;
}

/* El único token que depende del corte: desde 620 la métrica es la de la maqueta. */
@media (min-width: 620px) {
  :root {
    --bf-panel-padding: 18px;
  }
}

/*
 * Tema oscuro. Son DOS interruptores para el MISMO juego de valores —preferencia explícita del
 * usuario y preferencia del sistema—, porque CSS no permite unir un selector de atributo y una
 * media query en una sola regla. Al tocar uno, tocar el otro.
 */
:root[data-theme="dark"] {
  --bf-accent: #ee7b24;
  --bf-accent-text: #f5a061;
  --bf-accent-fg: #ffffff;
  --bf-accent-soft: #2b2018;

  --bf-header-bg: #1b242c;
  --bf-header-fg: #e8eef3;
  --bf-sidebar-bg: #10181f;
  --bf-sidebar-fg: #e8eef3;
  --bf-sidebar-hover-bg: #1d2831;
  --bf-sidebar-muted: #8395a2;
  --bf-sidebar-line: rgba(255, 255, 255, 0.07);

  --bf-app-bg: #131b21;
  --bf-surface-bg: #1b242c;
  --bf-surface-fg: #e8eef3;
  --bf-panel-bg: #182128;
  --bf-panel-fg: #e8eef3;
  --bf-border: #2a3742;
  --bf-border-soft: #212c35;

  --bf-muted: #99abb7;
  --bf-dim: #75858f;

  --bf-field-bg: #141b22;
  --bf-field-line: rgba(214, 224, 232, 0.27);

  --bf-button-bg: #232e37;
  --bf-button-line: rgba(214, 224, 232, 0.45);
  --bf-button-hover-bg: #2c3843;
  --bf-button-press-bg: #33404c;

  --bf-success: #4fbb85;
  --bf-success-soft: #16302a;
  --bf-warning: #d9a447;
  --bf-warning-soft: #2e2718;
  --bf-danger: #e07a6d;
  --bf-danger-soft: #33201e;
  --bf-info: #6ba6de;
  --bf-info-soft: #17232f;

  --bf-hover: rgba(255, 255, 255, 0.07);
  --bf-active: rgba(255, 255, 255, 0.11);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bf-accent: #ee7b24;
    --bf-accent-text: #f5a061;
    --bf-accent-fg: #ffffff;
    --bf-accent-soft: #2b2018;

    --bf-header-bg: #1b242c;
    --bf-header-fg: #e8eef3;
    --bf-sidebar-bg: #10181f;
    --bf-sidebar-fg: #e8eef3;
    --bf-sidebar-hover-bg: #1d2831;
    --bf-sidebar-muted: #8395a2;
    --bf-sidebar-line: rgba(255, 255, 255, 0.07);

    --bf-app-bg: #131b21;
    --bf-surface-bg: #1b242c;
    --bf-surface-fg: #e8eef3;
    --bf-panel-bg: #182128;
    --bf-panel-fg: #e8eef3;
    --bf-border: #2a3742;
    --bf-border-soft: #212c35;

    --bf-muted: #99abb7;
    --bf-dim: #75858f;

    --bf-field-bg: #141b22;
    --bf-field-line: rgba(214, 224, 232, 0.27);

    --bf-button-bg: #232e37;
    --bf-button-line: rgba(214, 224, 232, 0.45);
    --bf-button-hover-bg: #2c3843;
    --bf-button-press-bg: #33404c;

    --bf-success: #4fbb85;
    --bf-success-soft: #16302a;
    --bf-warning: #d9a447;
    --bf-warning-soft: #2e2718;
    --bf-danger: #e07a6d;
    --bf-danger-soft: #33201e;
    --bf-info: #6ba6de;
    --bf-info-soft: #17232f;

    --bf-hover: rgba(255, 255, 255, 0.07);
    --bf-active: rgba(255, 255, 255, 0.11);
  }
}