/*
 * Marca Camuzzi. Valores del manual de marca (Figma "Camuzzi Manual de marca"):
 * paleta Azul #0066B3, Celeste #00AEEF, Azul oscuro #1E3462, Gris #7885A1,
 * Negro #1D1D1B, Rojo #FF0F64; los tonos son la base mezclada con negro o
 * blanco, como los define el manual. Radios 5 px en botón e input, 16 px en
 * tarjetas. El modo oscuro no está en el manual: se deriva con la regla del
 * tema horatech (fondo = azul oscuro mezclado 50 % con negro, texto blanco).
 *
 * 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: #0066b3;
  --primary-color-contrast: #ffffff;
  --primary-color-light: color-mix(in srgb, #0066b3 50%, white);
  --primary-color-dark: color-mix(in srgb, #0066b3 75%, black);
  --primary-color-darker: color-mix(in srgb, #0066b3 50%, black);
  --accent-color: #00aeef;
  --accent-color-contrast: #ffffff;
  --accent-color-light: color-mix(in srgb, #00aeef 50%, white);
  --accent-color-dark: color-mix(in srgb, #00aeef 75%, black);
  --accent-color-darker: color-mix(in srgb, #00aeef 50%, black);
  --warn-color: #ff0f64;
  --warn-color-contrast: #ffffff;
  --warn-color-light: color-mix(in srgb, #ff0f64 50%, white);
  --warn-color-dark: color-mix(in srgb, #ff0f64 75%, black);
  --warn-color-darker: color-mix(in srgb, #ff0f64 50%, black);

  --bg-color-solid: #ffffff;
  --bg-color: rgba(255, 255, 255, 0.95);
  --bg-color-85: rgba(255, 255, 255, 0.85);
  --fg-color: #1d1d1b;
  --input-color: color-mix(in srgb, #7885a1 8%, transparent);

  --font-regular: 'Roboto-Regular', 'Roboto', arial, sans-serif;
  --font-semibold: 'Roboto-SemiBold', 'Roboto', arial, sans-serif;
  --font-bold: 'GothamRounded-Bold', 'Roboto-Bold', arial, sans-serif;
  --font-italic: 'Roboto-Italic', 'Roboto', arial, sans-serif;

  --radio-boton: 5px;
  --radio-input: 5px;
  --radio-card: 16px;
  --radio-dialogo: 16px;

  /* Página gris muy claro (gris + blanco 95 %, como las pantallas de muestra
     del manual): barra, menú y tarjetas quedan recortados en blanco. */
  --fondo-claro: linear-gradient(
    color-mix(in srgb, #7885a1 5%, white),
    color-mix(in srgb, #7885a1 5%, white)
  );
  --fondo-oscuro: linear-gradient(
    135deg,
    color-mix(in srgb, #1e3462 50%, black),
    color-mix(in srgb, #1e3462 30%, black)
  );

  /* Sombras del manual (frame Sombras): 1 = 0 2px 4px .24, 2 = 0 4px 8px .05,
     3 = 0 8px 16px .12, 4 = 0 16px 24px .12. Barra y menú con la 2, tarjetas
     con la 3; el manual no asigna sombras a componentes. */
  --sombra-barra: 0 4px 8px rgba(0, 0, 0, 0.05);
  --sombra-menu: 0 4px 8px rgba(0, 0, 0, 0.05);
  --sombra-card: 0 8px 16px rgba(0, 0, 0, 0.12);
  --sombra-panel: 0 8px 16px rgba(0, 0, 0, 0.12);
  --radio-barra: 16px;
  --radio-menu: 16px;
  --radio-login: 16px;

  /* Botón primario del manual: celeste relleno, texto blanco. */
  --boton-login-bg: #00aeef;
  --boton-login-fg: #ffffff;

  /* Series de gráficos con la paleta del manual: bases y tonos (base + blanco
     50 %; verde con negro 25 % para que rinda sobre blanco). */
  --serie-1: #0066b3;
  --serie-2: #00aeef;
  --serie-3: #3cbf9f;
  --serie-4: #ff0f64;
  --serie-5: #7885a1;
  --serie-6: #1e3462;
  --serie-7: #80b3d9;
  --serie-8: #80d7f7;
  --serie-9: #ff87b2;
  --serie-10: #bcc2d0;
}

/* `: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: #0066b3;
  --primary-color-contrast: #ffffff;
  --primary-color-light: color-mix(in srgb, #0066b3 50%, white);
  --primary-color-dark: color-mix(in srgb, #0066b3 75%, black);
  --primary-color-darker: color-mix(in srgb, #0066b3 50%, black);
  --accent-color: #00aeef;
  --accent-color-contrast: #ffffff;
  --accent-color-light: color-mix(in srgb, #00aeef 50%, white);
  --accent-color-dark: color-mix(in srgb, #00aeef 75%, black);
  --accent-color-darker: color-mix(in srgb, #00aeef 50%, black);
  --warn-color: #ff0f64;
  --warn-color-contrast: #ffffff;
  --warn-color-light: color-mix(in srgb, #ff0f64 50%, white);
  --warn-color-dark: color-mix(in srgb, #ff0f64 75%, black);
  --warn-color-darker: color-mix(in srgb, #ff0f64 50%, black);

  --bg-color-solid: color-mix(in srgb, #1e3462 50%, black);
  --bg-color: color-mix(in srgb, color-mix(in srgb, #1e3462 50%, black) 95%, transparent);
  --bg-color-85: color-mix(in srgb, color-mix(in srgb, #1e3462 50%, black) 85%, transparent);
  --fg-color: #ffffff;
  --input-color: rgba(255, 255, 255, 0.04);

  --font-regular: 'Roboto-Regular', 'Roboto', arial, sans-serif;
  --font-semibold: 'Roboto-SemiBold', 'Roboto', arial, sans-serif;
  --font-bold: 'GothamRounded-Bold', 'Roboto-Bold', arial, sans-serif;
  --font-italic: 'Roboto-Italic', 'Roboto', arial, sans-serif;

  --radio-boton: 5px;
  --radio-input: 5px;
  --radio-card: 16px;
  --radio-dialogo: 16px;

  --sombra-barra: 0 4px 8px rgba(0, 0, 0, 0.25);
  --sombra-menu: 0 4px 8px rgba(0, 0, 0, 0.25);
  --sombra-card: 0 8px 16px rgba(0, 0, 0, 0.35);
  --sombra-panel: 0 8px 16px rgba(0, 0, 0, 0.35);
  --radio-barra: 16px;
  --radio-menu: 16px;
  --radio-login: 16px;
  --boton-login-bg: #00aeef;
  --boton-login-fg: #ffffff;
  --serie-1: #00aeef;
  --serie-2: #80b3d9;
  --serie-3: #50ffd4;
  --serie-4: #ff0f64;
  --serie-5: #bcc2d0;
  --serie-6: #80d7f7;
  --serie-7: #3cbf9f;
  --serie-8: #ff87b2;
  --serie-9: #7885a1;
  --serie-10: #0066b3;
}