/* Tokens de marca de LÍBEROS.

   Fuente: docs/marca/LIBEROS_auditoria_grafica_y_manual_de_marca.md, sección 13.
   Este fichero es la única definición de los colores, radios, sombras, espacios
   y duraciones de la marca. Nada de lo que hay aquí se repite en una plantilla:
   si un valor no está, se añade aquí y se usa por su nombre.

   Todo color literal está en la paleta (escalas, funcionales, blanco, negro y
   los dos colores propios del isotipo); el resto de tokens la citan con var().
   Los contrastes los mide tests/test_marca_tokens.py en claro y en oscuro, así
   que un cambio que baje de AA no pasa la suite.

   Correcciones sobre el manual, explicadas en docs/marca/AUDITORIA_MANUAL_DE_MARCA.md:

   M-01  El bloque oscuro por preferencia del sistema era un comentario («mismos
         valores que abajo»): el modo oscuro no se activaba nunca. Aquí los
         valores están escritos, y la prueba exige que los dos bloques coincidan.
   M-02  Faltaba `--lb-text-on-accent`, que la sección 5.3 sí define.
   M-03  Las sombras están tintadas de Noche, que no se ve sobre Noche. En oscuro
         se redefinen en negro.
   M-04  El cristal tintado al 0,88 daba 4,68:1 con texto blanco, no los 5,7 que
         dice el manual (ese es el del violeta sólido). Al 0,94 da 5,18 o más.
   M-06  Aviso y Error no tienen escala, así que la regla de los chips (fondo 50,
         texto 700, punto 500) no los construía. Los seis estados van en tokens
         `--lb-estado-*`, y los dos sin escala usan sus colores funcionales.
   M-07  `text/tertiary` oscuro era un hexadecimal suelto; ahora es Niebla 450.
         Niebla 400 lo habría igualado a `text/secondary`.
   M-08  Espaciado y retícula de la sección 8, como tokens.
   M-11  En oscuro el texto funcional cambiaba y su fondo suave no: éxito, aviso,
         error e información quedaban entre 1,6 y 2,4:1. Ahora el fondo suave es
         el color oscuro al 14 % sobre la superficie.
   M-12  El hover oscuro del botón primario, Violeta 500, daba 4,42:1 con texto
         blanco. Pasa a Violeta 700 (8,05:1).

   `--lb-text-link-hover` no está en el manual: el hover de un enlace no puede
   ser el del botón, porque en oscuro Violeta 700 sobre Noche da 2,14:1.
*/

:root {
  /* --- Marca ------------------------------------------------------------- */
  --lb-blanco: #ffffff;
  --lb-negro: #000000;

  --lb-violeta-50: #f7f5ff;
  --lb-violeta-100: #eeeafe;
  --lb-violeta-200: #ded6fe;
  --lb-violeta-300: #c7b6fe;
  --lb-violeta-400: #a784ff;
  --lb-violeta-500: #904fff;
  --lb-violeta-600: #8133f1;
  --lb-violeta-700: #681ec8;
  --lb-violeta-800: #521da5;
  --lb-violeta-900: #370d6e;
  --lb-violeta-950: #210249;

  --lb-turquesa-50: #ebfbf8;
  --lb-turquesa-100: #d8f5f0;
  --lb-turquesa-200: #b1eae0;
  --lb-turquesa-300: #78d6c9;
  --lb-turquesa-400: #00c9b7;
  --lb-turquesa-500: #089487;
  --lb-turquesa-600: #028175;
  --lb-turquesa-700: #06665d;
  --lb-turquesa-800: #014e46;
  --lb-turquesa-900: #003631;
  --lb-turquesa-950: #00201c;

  --lb-cielo-50: #f0f8fe;
  --lb-cielo-100: #dcf1ff;
  --lb-cielo-200: #bae3fe;
  --lb-cielo-300: #82ccfb;
  --lb-cielo-400: #23aaed;
  --lb-cielo-500: #038ac4;
  --lb-cielo-600: #0478ab;
  --lb-cielo-700: #005f89;
  --lb-cielo-800: #024868;
  --lb-cielo-900: #01324a;
  --lb-cielo-950: #001d2e;

  --lb-magenta-50: #fdf3ff;
  --lb-magenta-100: #fbe5ff;
  --lb-magenta-200: #f8caff;
  --lb-magenta-300: #f29eff;
  --lb-magenta-400: #e355fa;
  --lb-magenta-500: #cf15e8;
  --lb-magenta-600: #af00c5;
  --lb-magenta-700: #8b039d;
  --lb-magenta-800: #6b0179;
  --lb-magenta-900: #4c0056;
  --lb-magenta-950: #2f0036;

  --lb-niebla-50: #f9fafd;
  --lb-niebla-100: #f2f3f8;
  --lb-niebla-200: #e4e6ed;
  --lb-niebla-300: #d1d4de;
  --lb-niebla-400: #a0a4b2;
  --lb-niebla-450: #8d92a0;
  --lb-niebla-500: #6c7180;
  --lb-niebla-600: #585d6e;
  --lb-niebla-700: #41475b;
  --lb-niebla-800: #282f47;
  --lb-niebla-900: #0f1741;
  --lb-niebla-950: #080c27;

  /* Grafito: los neutros del modo oscuro. Carlo, 25-09-2026: «negro grafito, no
     ese azul»; el oscuro usaba el extremo de Niebla, que es azul marino. Niebla
     sigue en el modo claro y en la pantalla de acceso. */
  --lb-grafito-50: #f7f7f8;
  --lb-grafito-100: #ededef;
  --lb-grafito-200: #dcdcdf;
  --lb-grafito-300: #c2c2c7;
  --lb-grafito-400: #a1a1a8;
  --lb-grafito-450: #8e8e95;
  --lb-grafito-500: #71717a;
  --lb-grafito-600: #52525a;
  --lb-grafito-700: #3a3a40;
  --lb-grafito-800: #27272b;
  --lb-grafito-900: #1b1b1e;
  --lb-grafito-950: #121214;

  /* Los extremos de los degradados del isotipo, que no están en ninguna escala */
  --lb-orbita-fin: #0f2182;
  --lb-gota-inicio: #1ae5d3;

  /* --- Funcionales ------------------------------------------------------- */
  --lb-exito-claro: #0b7643;
  --lb-exito-oscuro: #63d18f;
  --lb-aviso-claro: #995b03;
  --lb-aviso-oscuro: #f5b75b;
  --lb-error-claro: #cc272e;
  --lb-error-oscuro: #f97770;
  --lb-info-claro: #016baa;
  --lb-exito-suave: #eaf8ee;
  --lb-aviso-suave: #fdf1e6;
  --lb-error-suave: #fef0ee;
  --lb-info-suave: #ebf5fe;

  --lb-exito: var(--lb-exito-claro);
  --lb-exito-bg: var(--lb-exito-suave);
  --lb-aviso: var(--lb-aviso-claro);
  --lb-aviso-bg: var(--lb-aviso-suave);
  --lb-error: var(--lb-error-claro);
  --lb-error-bg: var(--lb-error-suave);
  --lb-info: var(--lb-info-claro);
  --lb-info-bg: var(--lb-info-suave);

  /* --- Semánticos (claro) ------------------------------------------------ */
  --lb-bg-canvas: var(--lb-niebla-50);
  --lb-bg-surface: var(--lb-blanco);
  --lb-bg-surface-2: var(--lb-niebla-100);
  --lb-bg-inverse: var(--lb-niebla-900);
  --lb-border-subtle: var(--lb-niebla-200);
  --lb-border-strong: var(--lb-niebla-300);
  --lb-text-primary: var(--lb-niebla-900);
  --lb-text-secondary: var(--lb-niebla-600);
  /* Sólo sobre el lienzo o la superficie: sobre surface-2 baja a 4,40:1 */
  --lb-text-tertiary: var(--lb-niebla-500);
  --lb-text-on-accent: var(--lb-blanco);
  --lb-text-inverse: var(--lb-blanco);
  --lb-text-link: var(--lb-violeta-600);
  --lb-text-link-hover: var(--lb-violeta-700);
  --lb-accent: var(--lb-violeta-600);
  --lb-accent-hover: var(--lb-violeta-700);
  --lb-accent-subtle: var(--lb-violeta-50);
  --lb-accent-subtle-text: var(--lb-violeta-700);
  --lb-focus: var(--lb-violeta-500);
  /* Anillo de foco de la sección 5.3: 2 px con 2 px de separación */
  --lb-focus-ring: 0 0 0 2px var(--lb-bg-surface), 0 0 0 4px var(--lb-focus);

  /* --- Estados de producto (sección 5.4) ---------------------------------- */
  --lb-estado-borrador-bg: var(--lb-niebla-50);
  --lb-estado-borrador-texto: var(--lb-niebla-700);
  --lb-estado-borrador-punto: var(--lb-niebla-500);
  --lb-estado-pendiente-bg: var(--lb-aviso-bg);
  --lb-estado-pendiente-texto: var(--lb-aviso);
  --lb-estado-pendiente-punto: var(--lb-aviso);
  --lb-estado-firmado-bg: var(--lb-violeta-50);
  --lb-estado-firmado-texto: var(--lb-violeta-700);
  --lb-estado-firmado-punto: var(--lb-violeta-500);
  --lb-estado-pagado-bg: var(--lb-cielo-50);
  --lb-estado-pagado-texto: var(--lb-cielo-700);
  --lb-estado-pagado-punto: var(--lb-cielo-500);
  --lb-estado-liquidado-bg: var(--lb-turquesa-50);
  --lb-estado-liquidado-texto: var(--lb-turquesa-700);
  --lb-estado-liquidado-punto: var(--lb-turquesa-500);
  --lb-estado-disputa-bg: var(--lb-error-bg);
  --lb-estado-disputa-texto: var(--lb-error);
  --lb-estado-disputa-punto: var(--lb-error);

  /* --- Zonas del WorkHub (AL-168; G1 opción B y G2 de Carlo) -----------------
     Cada zona se reconoce por su color, su icono y su texto, nunca sólo por el
     color. `--lb-zona-<ámbito>` pinta la banda, el icono y la etiqueta (4,5:1
     sobre el lienzo, la superficie y su fondo); `-fondo` es el tono del rayado
     de las zonas restringidas (interno y privado). */
  --lb-zona-compartido: var(--lb-turquesa-700);
  --lb-zona-compartido-fondo: var(--lb-turquesa-50);
  --lb-zona-cliente: var(--lb-cielo-700);
  --lb-zona-cliente-fondo: var(--lb-cielo-50);
  --lb-zona-interno: var(--lb-magenta-700);
  --lb-zona-interno-fondo: var(--lb-magenta-50);
  --lb-zona-privado: var(--lb-niebla-700);
  --lb-zona-privado-fondo: var(--lb-niebla-100);

  /* --- Series de gráficas ---------------------------------------------------
     Cuatro tonos de la marca, su segundo nivel y un neutro, en este orden.
     Cada una da 3:1 o más sobre el lienzo y la superficie (WCAG 1.4.11). */
  --lb-serie-1: var(--lb-violeta-600);
  --lb-serie-2: var(--lb-turquesa-500);
  --lb-serie-3: var(--lb-cielo-500);
  --lb-serie-4: var(--lb-magenta-500);
  --lb-serie-5: var(--lb-violeta-800);
  --lb-serie-6: var(--lb-turquesa-800);
  --lb-serie-7: var(--lb-cielo-800);
  --lb-serie-8: var(--lb-niebla-600);

  /* --- Degradados -------------------------------------------------------- */
  --lb-grad-orbita: linear-gradient(135deg, var(--lb-magenta-500) 0%, var(--lb-violeta-600) 40%,
                                    var(--lb-violeta-800) 75%, var(--lb-orbita-fin) 100%);
  --lb-grad-gota: linear-gradient(135deg, var(--lb-gota-inicio) 0%, var(--lb-cielo-400) 100%);

  /* --- Liquid Glass (claro) ---------------------------------------------- */
  --lb-glass-regular-bg: rgba(255, 255, 255, 0.64);
  --lb-glass-clear-bg: rgba(255, 255, 255, 0.16);
  --lb-glass-tint-bg: rgba(129, 51, 241, 0.94);
  --lb-glass-border: rgba(255, 255, 255, 0.6);
  --lb-glass-edge: rgba(15, 23, 65, 0.08);
  --lb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --lb-glass-filter: blur(24px) saturate(180%);
  --lb-glass-clear-filter: blur(10px) saturate(150%);
  --lb-glass-dim: rgba(8, 12, 39, 0.35);
  --lb-glass-fallback: rgba(255, 255, 255, 0.94);

  /* --- Tipografía -------------------------------------------------------- */
  --lb-font: "Geist", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, sans-serif;

  /* Escala de la sección 6.2: tamaño e interlineado. Los display son fluidos
     entre móvil y escritorio. Pesos: 400, 500, 600 y 700, nunca 800. */
  --lb-fs-display-1: clamp(52px, 40px + 2.5vw, 76px);
  --lb-lh-display-1: 1.02;
  --lb-fs-display-2: clamp(40px, 32px + 1.67vw, 56px);
  --lb-lh-display-2: 1.05;
  --lb-fs-display-3: clamp(32px, 26px + 1.25vw, 44px);
  --lb-lh-display-3: 1.1;
  --lb-fs-title-1: 30px;
  --lb-lh-title-1: 36px;
  --lb-fs-title-2: 24px;
  --lb-lh-title-2: 30px;
  --lb-fs-title-3: 20px;
  --lb-lh-title-3: 26px;
  --lb-fs-body-lg: 18px;
  --lb-lh-body-lg: 28px;
  --lb-fs-body: 16px;
  --lb-lh-body: 24px;
  --lb-fs-body-sm: 14px;
  --lb-lh-body-sm: 20px;
  --lb-fs-label: 14px;
  --lb-lh-label: 20px;
  --lb-fs-caption: 12px;
  --lb-lh-caption: 16px;

  /* --- Forma ------------------------------------------------------------- */
  --lb-radius-xs: 6px;
  --lb-radius-sm: 10px;
  --lb-radius-md: 14px;
  --lb-radius-lg: 20px;
  --lb-radius-xl: 28px;
  --lb-radius-2xl: 36px;
  --lb-radius-full: 9999px;

  /* --- Espaciado (sección 8.2): base de 4 px ------------------------------ */
  --lb-space-1: 4px;
  --lb-space-2: 8px;
  --lb-space-3: 12px;
  --lb-space-4: 16px;
  --lb-space-5: 20px;
  --lb-space-6: 24px;
  --lb-space-8: 32px;
  --lb-space-10: 40px;
  --lb-space-12: 48px;
  --lb-space-16: 64px;
  --lb-space-20: 80px;
  --lb-space-24: 96px;
  --lb-space-32: 128px;

  /* --- Retícula (sección 8.3) ------------------------------------------------
     Una variable CSS no vale dentro de @media, así que los puntos de ruptura se
     escriben a mano en las hojas: 480, 768, 1024, 1280 y 1536 px, sustituyendo
     a los de Bootstrap. Aquí quedan para leerlos desde JavaScript. */
  --lb-bp-sm: 480px;
  --lb-bp-md: 768px;
  --lb-bp-lg: 1024px;
  --lb-bp-xl: 1280px;
  --lb-bp-2xl: 1536px;
  --lb-contenido-max: 1200px;
  --lb-margen-movil: 16px;
  --lb-margen-tableta: 20px;
  --lb-margen-escritorio: 24px;
  /* El alto mínimo de la barra superior, la del panel y la de la web: lo que ocupa arriba
     una sección que se queda fija (el carrusel de la landing, AL-314). */
  --lb-barra-alto: 64px;

  /* --- Elevación --------------------------------------------------------- */
  --lb-e1: 0 1px 2px rgba(15, 23, 65, 0.06), 0 1px 1px rgba(15, 23, 65, 0.04);
  --lb-e2: 0 4px 12px -2px rgba(15, 23, 65, 0.08), 0 2px 4px rgba(15, 23, 65, 0.04);
  --lb-e3: 0 12px 32px -8px rgba(15, 23, 65, 0.18), 0 2px 6px rgba(15, 23, 65, 0.06);
  --lb-e4: 0 24px 64px -12px rgba(15, 23, 65, 0.28);

  /* --- Movimiento -------------------------------------------------------- */
  --lb-dur-1: 120ms;
  --lb-dur-2: 200ms;
  --lb-dur-3: 320ms;
  --lb-dur-4: 480ms;
  --lb-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --lb-ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
}

/* --- Semánticos (oscuro) --------------------------------------------------

   Dos vías, la del sistema y la del atributo, con los mismos valores. La del
   sistema se anula con `data-theme="light"` para que un conmutador pueda
   forzar el modo claro (decisión D6 de marca). tests/test_marca_tokens.py
   falla si los dos bloques dejan de decir lo mismo.
*/
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Los controles del navegador (el calendario de una fecha, las barras de
       desplazamiento) en oscuro: el icono del calendario no se veía (RB.18). */
    color-scheme: dark;
    --lb-bg-canvas: var(--lb-grafito-950);
    --lb-bg-surface: var(--lb-grafito-900);
    --lb-bg-surface-2: var(--lb-grafito-800);
    --lb-bg-inverse: var(--lb-grafito-50);
    --lb-border-subtle: rgba(255, 255, 255, 0.08);
    --lb-border-strong: var(--lb-grafito-700);
    --lb-text-primary: var(--lb-grafito-100);
    --lb-text-secondary: var(--lb-grafito-400);
    --lb-text-tertiary: var(--lb-grafito-450);
    --lb-text-link: var(--lb-violeta-300);
    --lb-text-inverse: var(--lb-grafito-900);
    --lb-serie-1: var(--lb-violeta-400);
    --lb-serie-2: var(--lb-turquesa-400);
    --lb-serie-3: var(--lb-cielo-400);
    --lb-serie-4: var(--lb-magenta-400);
    --lb-serie-5: var(--lb-violeta-300);
    --lb-serie-6: var(--lb-turquesa-300);
    --lb-serie-7: var(--lb-cielo-300);
    --lb-serie-8: var(--lb-grafito-400);
    --lb-text-link-hover: var(--lb-violeta-200);
    --lb-accent-hover: var(--lb-violeta-700);
    --lb-accent-subtle: var(--lb-violeta-950);
    --lb-accent-subtle-text: var(--lb-violeta-300);
    --lb-focus: var(--lb-violeta-400);
    --lb-exito: var(--lb-exito-oscuro);
    --lb-exito-bg: rgba(99, 209, 143, 0.14);
    --lb-aviso: var(--lb-aviso-oscuro);
    --lb-aviso-bg: rgba(245, 183, 91, 0.14);
    --lb-error: var(--lb-error-oscuro);
    --lb-error-bg: rgba(249, 119, 112, 0.14);
    --lb-info: var(--lb-cielo-300);
    --lb-info-bg: rgba(130, 204, 251, 0.14);
    --lb-estado-borrador-bg: var(--lb-grafito-800);
    --lb-estado-borrador-texto: var(--lb-grafito-300);
    --lb-estado-borrador-punto: var(--lb-grafito-400);
    --lb-estado-firmado-bg: var(--lb-violeta-950);
    --lb-estado-firmado-texto: var(--lb-violeta-300);
    --lb-estado-firmado-punto: var(--lb-violeta-400);
    --lb-estado-pagado-bg: var(--lb-cielo-950);
    --lb-estado-pagado-texto: var(--lb-cielo-300);
    --lb-estado-pagado-punto: var(--lb-cielo-400);
    --lb-estado-liquidado-bg: var(--lb-turquesa-950);
    --lb-estado-liquidado-texto: var(--lb-turquesa-300);
    --lb-estado-liquidado-punto: var(--lb-turquesa-400);
    --lb-zona-compartido: var(--lb-turquesa-300);
    --lb-zona-compartido-fondo: var(--lb-turquesa-950);
    --lb-zona-cliente: var(--lb-cielo-300);
    --lb-zona-cliente-fondo: var(--lb-cielo-950);
    --lb-zona-interno: var(--lb-magenta-300);
    --lb-zona-interno-fondo: var(--lb-magenta-950);
    --lb-zona-privado: var(--lb-grafito-300);
    --lb-zona-privado-fondo: var(--lb-grafito-800);
    --lb-glass-regular-bg: rgba(27, 27, 30, 0.55);
    --lb-glass-clear-bg: rgba(255, 255, 255, 0.08);
    --lb-glass-tint-bg: rgba(129, 51, 241, 0.8);
    --lb-glass-border: rgba(255, 255, 255, 0.14);
    --lb-glass-edge: rgba(0, 0, 0, 0.24);
    --lb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    --lb-glass-fallback: rgba(27, 27, 30, 0.94);
    --lb-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lb-e2: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
    --lb-e3: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
    --lb-e4: 0 24px 64px -12px rgba(0, 0, 0, 0.65);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --lb-bg-canvas: var(--lb-grafito-950);
  --lb-bg-surface: var(--lb-grafito-900);
  --lb-bg-surface-2: var(--lb-grafito-800);
  --lb-bg-inverse: var(--lb-grafito-50);
  --lb-border-subtle: rgba(255, 255, 255, 0.08);
  --lb-border-strong: var(--lb-grafito-700);
  --lb-text-primary: var(--lb-grafito-100);
  --lb-text-secondary: var(--lb-grafito-400);
  --lb-text-tertiary: var(--lb-grafito-450);
  --lb-text-link: var(--lb-violeta-300);
  --lb-text-inverse: var(--lb-grafito-900);
  --lb-serie-1: var(--lb-violeta-400);
  --lb-serie-2: var(--lb-turquesa-400);
  --lb-serie-3: var(--lb-cielo-400);
  --lb-serie-4: var(--lb-magenta-400);
  --lb-serie-5: var(--lb-violeta-300);
  --lb-serie-6: var(--lb-turquesa-300);
  --lb-serie-7: var(--lb-cielo-300);
  --lb-serie-8: var(--lb-grafito-400);
  --lb-text-link-hover: var(--lb-violeta-200);
  --lb-accent-hover: var(--lb-violeta-700);
  --lb-accent-subtle: var(--lb-violeta-950);
  --lb-accent-subtle-text: var(--lb-violeta-300);
  --lb-focus: var(--lb-violeta-400);
  --lb-exito: var(--lb-exito-oscuro);
  --lb-exito-bg: rgba(99, 209, 143, 0.14);
  --lb-aviso: var(--lb-aviso-oscuro);
  --lb-aviso-bg: rgba(245, 183, 91, 0.14);
  --lb-error: var(--lb-error-oscuro);
  --lb-error-bg: rgba(249, 119, 112, 0.14);
  --lb-info: var(--lb-cielo-300);
  --lb-info-bg: rgba(130, 204, 251, 0.14);
  --lb-estado-borrador-bg: var(--lb-grafito-800);
  --lb-estado-borrador-texto: var(--lb-grafito-300);
  --lb-estado-borrador-punto: var(--lb-grafito-400);
  --lb-estado-firmado-bg: var(--lb-violeta-950);
  --lb-estado-firmado-texto: var(--lb-violeta-300);
  --lb-estado-firmado-punto: var(--lb-violeta-400);
  --lb-estado-pagado-bg: var(--lb-cielo-950);
  --lb-estado-pagado-texto: var(--lb-cielo-300);
  --lb-estado-pagado-punto: var(--lb-cielo-400);
  --lb-estado-liquidado-bg: var(--lb-turquesa-950);
  --lb-estado-liquidado-texto: var(--lb-turquesa-300);
  --lb-estado-liquidado-punto: var(--lb-turquesa-400);
  --lb-zona-compartido: var(--lb-turquesa-300);
  --lb-zona-compartido-fondo: var(--lb-turquesa-950);
  --lb-zona-cliente: var(--lb-cielo-300);
  --lb-zona-cliente-fondo: var(--lb-cielo-950);
  --lb-zona-interno: var(--lb-magenta-300);
  --lb-zona-interno-fondo: var(--lb-magenta-950);
  --lb-zona-privado: var(--lb-grafito-300);
  --lb-zona-privado-fondo: var(--lb-grafito-800);
  --lb-glass-regular-bg: rgba(27, 27, 30, 0.55);
  --lb-glass-clear-bg: rgba(255, 255, 255, 0.08);
  --lb-glass-tint-bg: rgba(129, 51, 241, 0.8);
  --lb-glass-border: rgba(255, 255, 255, 0.14);
  --lb-glass-edge: rgba(0, 0, 0, 0.24);
  --lb-glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.18);
  --lb-glass-fallback: rgba(27, 27, 30, 0.94);
  --lb-e1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --lb-e2: 0 4px 12px -2px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.3);
  --lb-e3: 0 12px 32px -8px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35);
  --lb-e4: 0 24px 64px -12px rgba(0, 0, 0, 0.65);
}