/*
 * Marca FACE (Federación Argentina de Cooperativas de Electricidad). No hay
 * manual de marca: los valores salen del sitio face.coop (`assets/face.css` y
 * los estilos de la portada, relevados el 27-oct-2026):
 *   acento #00968F, acento oscuro #007A70, acento suave #EAF5F4, texto #1A1D1F,
 *   texto atenuado #6B7280, gris de bandas #F7F8F9, borde #ECEEF0,
 *   radios 8 px (botón, input) y 12 px (tarjeta), tipografía Figtree.
 * Las superficies oscuras del sitio (portada y encabezados) usan petróleo
 * #0E3B3C / #0A2C2D con aqua #21E3C3 / #12B39C; de ahí salen el modo oscuro
 * y el color de acento. El sitio no define rojo de alerta: `--warn-*` queda
 * con el valor de la app.
 *
 * Las dos secciones definen las mismas variables: el bundle las redefine
 * todas para el tema oscuro, así que la marca también tiene que hacerlo.
 */

:root {
  --primary-color: #00968f;
  --primary-color-contrast: #ffffff;
  --primary-color-light: color-mix(in srgb, #00968f 50%, white);
  --primary-color-dark: #007a70;
  --primary-color-darker: color-mix(in srgb, #00968f 50%, black);
  /* Acento: petróleo de las superficies oscuras del sitio, para que los
     botones de acento se distingan del primario. */
  --accent-color: #0e3b3c;
  --accent-color-contrast: #ffffff;
  --accent-color-light: color-mix(in srgb, #0e3b3c 50%, white);
  --accent-color-dark: color-mix(in srgb, #0e3b3c 75%, black);
  --accent-color-darker: #0a2c2d;

  --bg-color-solid: #ffffff;
  --bg-color: rgba(255, 255, 255, 0.95);
  --bg-color-85: rgba(255, 255, 255, 0.85);
  --fg-color: #1a1d1f;
  --input-color: color-mix(in srgb, #6b7280 6%, transparent);

  --font-regular: 'Figtree-Regular', 'Figtree', system-ui, sans-serif;
  --font-semibold: 'Figtree-SemiBold', 'Figtree', system-ui, sans-serif;
  --font-bold: 'Figtree-Bold', 'Figtree', system-ui, sans-serif;
  --font-italic: 'Figtree-Italic', 'Figtree', system-ui, sans-serif;

  --radio-boton: 8px;
  --radio-input: 8px;
  --radio-card: 12px;
  --radio-dialogo: 12px;
  --radio-barra: 12px;
  --radio-menu: 12px;
  --radio-login: 12px;

  /* Página en el gris de bandas del sitio; barra, menú y tarjetas en blanco. */
  --fondo-claro: linear-gradient(#f7f8f9, #f7f8f9);
  --fondo-oscuro: linear-gradient(135deg, #0e3b3c, #0a2c2d);

  /* El sitio delimita con bordes finos y casi sin sombra: barra de la portada
     0 2px 10px .08; menús desplegables 0 8px 28px rgba(16,24,32,.08). */
  --sombra-barra: 0 2px 10px rgba(0, 0, 0, 0.08);
  --sombra-menu: 0 2px 10px rgba(0, 0, 0, 0.08);
  --sombra-card: 0 8px 28px rgba(16, 24, 32, 0.08);
  --sombra-panel: 0 8px 28px rgba(16, 24, 32, 0.08);

  /* `.btn-face` del sitio: acento relleno, texto blanco. */
  --boton-login-bg: #00968f;
  --boton-login-fg: #ffffff;

  /* Series de gráficos: tonos del sitio primero; del 6 en adelante quedan los
     colores de la app, porque la paleta del sitio es monocroma. */
  --serie-1: #00968f;
  --serie-2: #0e3b3c;
  --serie-3: #21e3c3;
  --serie-4: #6b7280;
  --serie-5: #94a3b8;
}

/* `:root:has(body.dark-theme)` además de `.dark-theme`: los overlays del CDK
   (menús, selects, diálogos) cuelgan del html, no del body. */
.dark-theme,
:root:has(body.dark-theme) {
  --primary-color: #00968f;
  --primary-color-contrast: #ffffff;
  --primary-color-light: color-mix(in srgb, #00968f 50%, white);
  --primary-color-dark: #007a70;
  --primary-color-darker: color-mix(in srgb, #00968f 50%, black);
  /* Sobre petróleo el sitio acentúa con aqua. */
  --accent-color: #21e3c3;
  --accent-color-contrast: #0a2c2d;
  --accent-color-light: color-mix(in srgb, #21e3c3 50%, white);
  --accent-color-dark: #12b39c;
  --accent-color-darker: color-mix(in srgb, #21e3c3 50%, black);

  --bg-color-solid: #0e3b3c;
  --bg-color: rgba(14, 59, 60, 0.95);
  --bg-color-85: rgba(14, 59, 60, 0.85);
  --fg-color: #eaf7f2;
  --input-color: rgba(255, 255, 255, 0.04);

  --font-regular: 'Figtree-Regular', 'Figtree', system-ui, sans-serif;
  --font-semibold: 'Figtree-SemiBold', 'Figtree', system-ui, sans-serif;
  --font-bold: 'Figtree-Bold', 'Figtree', system-ui, sans-serif;
  --font-italic: 'Figtree-Italic', 'Figtree', system-ui, sans-serif;

  --radio-boton: 8px;
  --radio-input: 8px;
  --radio-card: 12px;
  --radio-dialogo: 12px;
  --radio-barra: 12px;
  --radio-menu: 12px;
  --radio-login: 12px;

  --sombra-barra: 0 2px 10px rgba(0, 0, 0, 0.3);
  --sombra-menu: 0 2px 10px rgba(0, 0, 0, 0.3);
  --sombra-card: 0 8px 28px rgba(0, 0, 0, 0.35);
  --sombra-panel: 0 8px 28px rgba(0, 0, 0, 0.35);
  --boton-login-bg: #21e3c3;
  --boton-login-fg: #0a2c2d;
  --serie-1: #21e3c3;
  --serie-2: #00968f;
  --serie-3: #eaf7f2;
  --serie-4: #94a3b8;
  --serie-5: #12b39c;
}