/*
 * Tokens del sistema de diseño. Toda pantalla toma de aquí colores, radios, espaciado,
 * tipografía y movimiento; ningún valor de color va escrito fuera de este archivo.
 */

:root {
  /* Claro por defecto; js/theme.js (y el script de index.html) pone data-theme="light|dark" en
   * <html>. Los valores de :root son los del claro. */
  color-scheme: light;

  /* Barra del navegador (meta theme-color, la escribe js/theme.js). */
  --theme-color: #F5F6F8;

  /* Base neutra */
  --color-bg: #F5F6F8;
  --color-surface: #FFFFFF;
  --color-text: #0F1B2D;
  --color-text-muted: #5A6577;
  --color-border: #DDE1E8;
  --color-primary-bg: #0F1B2D;
  --color-primary-fg: #FFFFFF;
  --color-focus: #0F1B2D;
  --color-placeholder: #DDE1E8;
  --color-selection: #DDE1E8;
  --color-primary-bg-disabled: #5A6577;
  --color-primary-fg-disabled: #FFFFFF;
  /* Error: rojo ladrillo profundo, distinto del coral de Resolutivo; siempre acompañado de texto. */
  --color-error: #B3261E;
  --color-backdrop: rgb(11 18 32 / 0.55);
  /* Código QR: negro sobre blanco en los dos temas (así lo leen todas las cámaras). */
  --qr-fg: #000000;
  --qr-bg: #FFFFFF;
  /* Opción elegida: azul niebla, tinte del azul noche sobre la superficie. */
  --color-selected-bg: #E9EDF4;
  --shadow-dialog: 0 16px 48px rgb(15 27 45 / 0.18);
  /* Botón "Ver más": rojo PDF con texto blanco (5:1, AA); el mismo en modo oscuro. */
  --color-pdf-bg: #D7261E;
  --color-pdf-fg: #FFFFFF;

  /* Colores por estilo (pantalla de resultado) */
  --style-resolutivo: #D93A40;
  --style-resolutivo-soft: #FCE8E9;
  --style-expresivo: #F2A516;
  --style-expresivo-soft: #FEF1D6;
  --style-tranquilo: #1B7F53;
  --style-tranquilo-soft: #DDF3E8;
  --style-analitico: #2F62D9;
  --style-analitico-soft: #E1EAFB;
  /* "ink": el color del estilo como texto sobre su fondo suave o sobre blanco (contraste AA).
   * Solo el ámbar necesita un tono más oscuro; los demás son el mismo color del estilo. */
  --style-resolutivo-ink: #D93A40;
  --style-expresivo-ink: #9A5800;
  --style-tranquilo-ink: #1B7F53;
  --style-analitico-ink: #2F62D9;

  /* Radios */
  --radius-card: 16px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --radius-logo: 12px;
  --radius-checkbox: 7px;

  /* Espaciado (escala de 4 px) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --gutter: 24px;

  /* Tipografía */
  --font-sans: "Figtree", "Figtree Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --text-display: clamp(2.5rem, 11.8vw, 2.875rem);
  --text-display-leading: 1.04;
  --text-display-tracking: -0.028em;
  --text-title: clamp(2.375rem, 11.2vw, 2.75rem);
  --text-label: 1rem;
  --text-heading: 1.25rem;
  --text-question: clamp(1.625rem, 7.4vw, 1.875rem);
  --text-eyebrow: 0.75rem;
  --text-result-name: 2.875rem;
  --text-lead: 1.0625rem;
  --text-lead-leading: 1.5;
  --text-body: 1.0625rem;
  --text-small: 0.875rem;
  --text-small-leading: 1.5;
  --text-button: 1.125rem;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Tamaños */
  --tap-min: 48px;
  --button-h: 56px;
  --field-h: 52px;
  --checkbox-size: 24px;
  --icon-size: 28px;
  --icon-stroke: 1.75;
  --logo-max-h: 48px;
  --content-max: 480px;
  --focus-ring: 3px;
  --focus-offset: 3px;

  /* Switch de tema (js/theme.js): apagado = claro. Borde y perilla con 3:1 sobre el fondo. */
  --switch-track-bg: transparent;
  --switch-track-border: #5A6577;
  --switch-thumb-bg: #5A6577;
  --switch-icon: #FFFFFF;
  --switch-hover: #E9EDF4;

  /* Movimiento (View Transitions) */
  --vt-duration: 300ms;
  --vt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --vt-shift: 24px;
}

/* Modo oscuro. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --theme-color: #0B1220;
  --switch-track-bg: #EEF1F6;
  --switch-track-border: #EEF1F6;
  --switch-thumb-bg: #0B1220;
  --switch-icon: #EEF1F6;
  --switch-hover: #1C2840;

  --color-bg: #0B1220;
  --color-surface: #141D30;
  --color-text: #EEF1F6;
  --color-text-muted: #9AA6BA;
  --color-border: #26324A;
  --color-primary-bg: #EEF1F6;
  --color-primary-fg: #0F1B2D;
  --color-focus: #EEF1F6;
  --color-placeholder: #26324A;
  --color-selection: #26324A;
  --color-primary-bg-disabled: #26324A;
  --color-primary-fg-disabled: #9AA6BA;
  --color-error: #F2B8B5;
  --color-backdrop: rgb(0 0 0 / 0.65);
  --color-selected-bg: #1C2840;
  --shadow-dialog: 0 16px 48px rgb(0 0 0 / 0.5);

  --style-resolutivo: #FF6B70;
  --style-expresivo: #FFB933;
  --style-tranquilo: #3DC189;
  --style-analitico: #6B93F5;
  --style-resolutivo-soft: #3A1D22;
  --style-expresivo-soft: #3A2E14;
  --style-tranquilo-soft: #143327;
  --style-analitico-soft: #1B2A4A;
  --style-resolutivo-ink: #FF6B70;
  --style-expresivo-ink: #FFB933;
  --style-tranquilo-ink: #3DC189;
  --style-analitico-ink: #6B93F5;
}

/* ------------------------------------------------------------------
 * Superficie de marca (brand-theme.css): login, inicio y tests del facilitador, con los colores
 * del logo de Biblyo. Solo valen dentro de .brand-surface y de .brand-tokens (elementos fuera de
 * las vistas que usan los mismos colores, como la barra inferior del facilitador).
 * ------------------------------------------------------------------ */
.brand-surface,
.brand-tokens {
  color-scheme: light;

  /* Fondo claro con un leve tinte violeta; paneles blancos con borde sutil. */
  --brand-bg: #F7F6FC;
  --brand-glow: rgb(91 63 201 / 0.08);
  --brand-text: #14122B;
  --brand-text-muted: #5B5878;
  --brand-placeholder: #6E6B8A;
  --brand-glass: rgb(255 255 255 / 0.82);
  --brand-glass-border: rgb(20 18 43 / 0.1);
  --brand-glass-border-strong: rgb(20 18 43 / 0.24);
  /* Aro gris de los íconos de las tarjetas del inicio. */
  --brand-icon-ring: rgb(20 18 43 / 0.2);
  --brand-field-bg: #FFFFFF;
  --brand-field-border: #8F8CA8;
  --brand-elevated: #FFFFFF;
  --brand-selection: rgb(91 63 201 / 0.18);
  --brand-error: #B3261E;
  /* Texto sobre el degradado de marca (botón): blanco en los dos temas. */
  --brand-on-gradient: #FFFFFF;

  /* Degradado de marca (colores del logo): igual en los dos temas. */
  --brand-magenta: #B0126B;
  --brand-violet: #5B3FC9;
  --brand-blue: #1F5FE3;
  --brand-sky: #0C8CE0;
  --brand-sky-halo: rgb(12 140 224 / 0.2);
  --brand-sky-glow: rgb(12 140 224 / 0.3);
  --brand-magenta-glow: rgb(176 18 107 / 0.35);
  --brand-blue-glow: rgb(31 95 227 / 0.35);
  /* Velo claro del botón: brillo sutil en la mitad superior. */
  --brand-sheen: rgb(255 255 255 / 0.14);

  /* Botones de acción con contorno de degradado (detalle de un test): relleno y brillo. En claro
   * el brillo es apenas una sombra de color, para que no ensucie el fondo. El relleno es opaco:
   * el contorno de degradado se pinta debajo (border-box). */
  --brand-action-bg: #FFFFFF;
  --brand-action-bg-hover: #FBFAFF;
  --brand-action-inner-glow: transparent;
  --brand-action-glow-start: rgb(176 18 107 / 0.1);
  --brand-action-glow-end: rgb(31 95 227 / 0.1);
  --brand-action-glow-hover-start: rgb(176 18 107 / 0.18);
  --brand-action-glow-hover-end: rgb(31 95 227 / 0.18);

  /* Brillo de los aros de los íconos y del círculo del detalle (trazo ancho y tenue). */
  --brand-ring-glow-opacity: 0.2;

  /* Decoración (brand-decor.css): opacidad por tema, en los contenedores que no se animan. */
  --decor-ribbon-opacity: 0.85;
  --decor-ribbon-opacity-home: 0.75;

  /* Switch de tema dentro de la superficie. */
  --switch-track-bg: transparent;
  --switch-track-border: #5B5878;
  --switch-thumb-bg: #14122B;
  --switch-icon: #FFFFFF;
  --switch-hover: rgb(91 63 201 / 0.08);

  /* Diálogo del evento (event-dialog.css): hoja opaca sobre un velo violeta oscuro. */
  --brand-sheet-bg: #FFFFFF;
  --brand-sheet-border: rgb(20 18 43 / 0.08);
  --brand-sheet-shadow: 0 -12px 40px rgb(20 18 43 / 0.16);
  --brand-sheet-grabber: rgb(20 18 43 / 0.18);
  --brand-backdrop: rgb(20 18 43 / 0.5);
  --brand-link-bg: #F3F1FB;

  /* Barra inferior del facilitador (tab-bar.css): cápsula de vidrio flotante y la píldora del
   * botón activo. */
  --tab-bar-bg: rgb(255 255 255 / 0.86);
  --tab-bar-border: rgb(20 18 43 / 0.1);
  --tab-bar-shadow: 0 10px 30px -8px rgb(20 18 43 / 0.28);
  --tab-bar-active-bg: rgb(91 63 201 / 0.1);
  --tab-bar-icon: #5B5878;
  /* Puerta de la casa rellena (Inicio activo): el tono de la píldora sobre la cápsula. */
  --tab-bar-cutout: #EFEDF9;

  --brand-radius-panel: 20px;
  --brand-radius-field: 14px;
  --brand-radius-sheet: 28px;

  /* Inicio (home.css): tinte y tinta del círculo de cada test. */
  --home-tone-violeta-bg: #EDE9FB;
  --home-tone-violeta-ink: #5B3FC9;
  --home-tone-rosa-bg: #FBE9F1;
  --home-tone-rosa-ink: #B0126B;
  --home-tone-azul-bg: #E4F1FB;
  --home-tone-azul-ink: #0B6CB4;
  --home-tone-ambar-bg: #FDF1D8;
  --home-tone-ambar-ink: #8A5800;

  /* Avatar sin foto (components.css): círculo gris con el ícono de persona. */
  --avatar-bg: #E9E8EF;
  --avatar-icon: #6E6B8A;
  --avatar-border: rgb(20 18 43 / 0.08);

  /* Niveles de una herida (reporte de her, her-report.css): tono vivo para barras y puntos, y
   * -ink para el texto del nivel (AA sobre los paneles). */
  --wound-none: #14A889;
  --wound-none-ink: #0A7560;
  --wound-incipient: #2F7BEF;
  --wound-incipient-ink: #1C5BCC;
  --wound-developing: #F2B01E;
  --wound-developing-ink: #8A5800;
  --wound-present: #F07A1A;
  --wound-present-ink: #AD4A00;
  --wound-installed: #E8408F;
  --wound-installed-ink: #B8135F;
  --wound-critical: #D11A47;
  --wound-critical-ink: #A30F37;
  --wound-track: rgb(20 18 43 / 0.08);
}

:root[data-theme="dark"] .brand-surface,
:root[data-theme="dark"] .brand-tokens {
  color-scheme: dark;

  --brand-bg: #0B0A1E;
  --brand-glow: rgb(91 63 201 / 0.28);
  --brand-text: #FFFFFF;
  --brand-text-muted: #B9B6D6;
  --brand-placeholder: #9592B8;
  --brand-glass: rgb(255 255 255 / 0.08);
  --brand-glass-border: rgb(255 255 255 / 0.14);
  --brand-glass-border-strong: rgb(255 255 255 / 0.32);
  --brand-icon-ring: rgb(255 255 255 / 0.28);
  --brand-field-bg: rgb(11 10 30 / 0.4);
  --brand-field-border: rgb(255 255 255 / 0.34);
  --brand-elevated: #17153A;
  --brand-selection: rgb(91 63 201 / 0.6);
  /* Error legible sobre el fondo oscuro (AA): el mismo valor del modo oscuro. */
  --brand-error: #F2B8B5;

  --brand-sky-halo: rgb(12 140 224 / 0.28);
  --brand-sky-glow: rgb(12 140 224 / 0.45);
  --brand-magenta-glow: rgb(176 18 107 / 0.5);
  --brand-blue-glow: rgb(31 95 227 / 0.5);

  /* Neón del boceto: relleno oscuro translúcido y halo de color. */
  --brand-action-bg: #100E28;
  --brand-action-bg-hover: #18153A;
  --brand-action-inner-glow: rgb(91 63 201 / 0.28);
  --brand-action-glow-start: rgb(176 18 107 / 0.42);
  --brand-action-glow-end: rgb(12 140 224 / 0.42);
  --brand-action-glow-hover-start: rgb(176 18 107 / 0.6);
  --brand-action-glow-hover-end: rgb(12 140 224 / 0.6);

  --brand-ring-glow-opacity: 0.38;

  --decor-ribbon-opacity: 1;
  --decor-ribbon-opacity-home: 0.8;

  /* Encendido: pista con el degradado de marca y perilla blanca con la luna violeta. */
  --switch-track-bg: linear-gradient(90deg, var(--brand-magenta), var(--brand-violet) 52%, var(--brand-blue));
  --switch-track-border: transparent;
  --switch-thumb-bg: #FFFFFF;
  --switch-icon: var(--brand-violet);
  --switch-hover: rgb(255 255 255 / 0.08);

  --tab-bar-bg: rgb(23 21 58 / 0.86);
  --tab-bar-border: rgb(255 255 255 / 0.12);
  --tab-bar-shadow: 0 10px 30px -6px rgb(0 0 0 / 0.6);
  --tab-bar-active-bg: rgb(255 255 255 / 0.12);
  --tab-bar-icon: #B9B6D6;
  --tab-bar-cutout: #2B2954;

  --brand-sheet-bg: #141233;
  --brand-sheet-border: rgb(255 255 255 / 0.12);
  --brand-sheet-shadow: 0 -12px 48px rgb(0 0 0 / 0.55);

  --wound-none: #3DD6AE;
  --wound-none-ink: #6FE3C4;
  --wound-incipient: #5E9BFF;
  --wound-incipient-ink: #9DC0FF;
  --wound-developing: #FFC23D;
  --wound-developing-ink: #FFD27A;
  --wound-present: #FF8F3D;
  --wound-present-ink: #FFB27A;
  --wound-installed: #FF62AB;
  --wound-installed-ink: #FF9ACB;
  --wound-critical: #FF4766;
  --wound-critical-ink: #FF8FA3;
  --wound-track: rgb(255 255 255 / 0.1);
  --brand-sheet-grabber: rgb(255 255 255 / 0.26);
  --brand-backdrop: rgb(4 3 14 / 0.72);
  --brand-link-bg: rgb(255 255 255 / 0.06);

  --home-tone-violeta-bg: rgb(91 63 201 / 0.24);
  --home-tone-violeta-ink: #C3B6FF;
  --home-tone-rosa-bg: rgb(176 18 107 / 0.26);
  --home-tone-rosa-ink: #FFA5D0;
  --home-tone-azul-bg: rgb(12 140 224 / 0.24);
  --home-tone-azul-ink: #8FD3FF;
  --home-tone-ambar-bg: rgb(242 165 22 / 0.22);
  --home-tone-ambar-ink: #FFD68A;

  --avatar-bg: rgb(255 255 255 / 0.1);
  --avatar-icon: #B9B6D6;
  --avatar-border: rgb(255 255 255 / 0.12);
}