/* @carlosrojaso/crd-tokens — fonts.
   Inter Variable (Confluence, página 02): un único tipo de letra para toda la escala, en formato
   variable (eje de peso 100–900, un solo binario por subset) y autoalojado — sin dependencia de
   Google Fonts en runtime. Subsets latin y latin-ext. Sin itálica: Confluence indica añadirla solo
   si algún estilo la usa. Las rutas son relativas a este archivo. */
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable-normal-latin.woff2') format('woff2-variations');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/inter-variable-normal-latin-ext.woff2') format('woff2-variations');
  unicode-range:
    U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

/* @carlosrojaso/crd-tokens — colors. Valores de Confluence (página 01 — Color Tokens), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* Paleta M3 generada algorítmicamente (HCT, materialyoucolor) desde la semilla de marca
   #FFCC00. Seis paletas tonales de 13 tonos (0–100); la neutral (croma 6) añade los tonos intermedios
   4, 6, 12, 17, 22, 24, 87, 92, 94, 96 y 98 que M3 usa para las superficies (decisión #80). Nivel
   PRIMITIVO: nunca se usa directamente en componentes, solo referenciado por los roles semánticos. */
:root {
  --crd-palette-primary-0: #000000;
  --crd-palette-primary-10: #241a00;
  --crd-palette-primary-20: #3d2f00;
  --crd-palette-primary-30: #584400;
  --crd-palette-primary-40: #735c0c;
  --crd-palette-primary-50: #8e7426;
  --crd-palette-primary-60: #a98e3d;
  --crd-palette-primary-70: #c6a854;
  --crd-palette-primary-80: #e3c46d; /* tono más cercano al amarillo de marca #FFCC00 */
  --crd-palette-primary-90: #ffe08b;
  --crd-palette-primary-95: #ffefcd;
  --crd-palette-primary-99: #fffbff;
  --crd-palette-primary-100: #ffffff;

  --crd-palette-secondary-0: #000000;
  --crd-palette-secondary-10: #231b04;
  --crd-palette-secondary-20: #392f15;
  --crd-palette-secondary-30: #50462a;
  --crd-palette-secondary-40: #695d3f;
  --crd-palette-secondary-50: #837656;
  --crd-palette-secondary-60: #9d906e;
  --crd-palette-secondary-70: #b9aa87;
  --crd-palette-secondary-80: #d5c5a1;
  --crd-palette-secondary-90: #f2e1bb;
  --crd-palette-secondary-95: #ffefcd;
  --crd-palette-secondary-99: #fffbff;
  --crd-palette-secondary-100: #ffffff;

  --crd-palette-tertiary-0: #000000;
  --crd-palette-tertiary-10: #03210c;
  --crd-palette-tertiary-20: #19361f;
  --crd-palette-tertiary-30: #2f4d34;
  --crd-palette-tertiary-40: #47664a;
  --crd-palette-tertiary-50: #5f7f62;
  --crd-palette-tertiary-60: #78997a;
  --crd-palette-tertiary-70: #92b494;
  --crd-palette-tertiary-80: #adcfae;
  --crd-palette-tertiary-90: #c8ecc9;
  --crd-palette-tertiary-95: #d6fad7;
  --crd-palette-tertiary-99: #f6fff2;
  --crd-palette-tertiary-100: #ffffff;

  --crd-palette-neutral-0: #000000;
  --crd-palette-neutral-4: #110e07;
  --crd-palette-neutral-6: #16130b;
  --crd-palette-neutral-10: #1f1b13;
  --crd-palette-neutral-12: #231f17;
  --crd-palette-neutral-17: #2d2a21;
  --crd-palette-neutral-20: #343027;
  --crd-palette-neutral-22: #38342b;
  --crd-palette-neutral-24: #3d392f;
  --crd-palette-neutral-30: #4b463c;
  --crd-palette-neutral-40: #635e53;
  --crd-palette-neutral-50: #7c766b;
  --crd-palette-neutral-60: #969084;
  --crd-palette-neutral-70: #b1aa9e;
  --crd-palette-neutral-80: #cdc6b9;
  --crd-palette-neutral-87: #e1d9cc;
  --crd-palette-neutral-90: #eae1d4;
  --crd-palette-neutral-92: #f0e7d9;
  --crd-palette-neutral-94: #f5eddf;
  --crd-palette-neutral-95: #f8f0e2;
  --crd-palette-neutral-96: #fbf3e5;
  --crd-palette-neutral-98: #fff8f1;
  --crd-palette-neutral-99: #fffbff;
  --crd-palette-neutral-100: #ffffff;

  --crd-palette-neutral-variant-0: #000000;
  --crd-palette-neutral-variant-10: #1f1b10;
  --crd-palette-neutral-variant-20: #353024;
  --crd-palette-neutral-variant-30: #4c4639;
  --crd-palette-neutral-variant-40: #645e4f;
  --crd-palette-neutral-variant-50: #7e7667;
  --crd-palette-neutral-variant-60: #989080;
  --crd-palette-neutral-variant-70: #b3aa99;
  --crd-palette-neutral-variant-80: #cfc6b4;
  --crd-palette-neutral-variant-90: #ebe1cf;
  --crd-palette-neutral-variant-95: #faf0dd;
  --crd-palette-neutral-variant-99: #fffbff;
  --crd-palette-neutral-variant-100: #ffffff;

  --crd-palette-error-0: #000000;
  --crd-palette-error-10: #410002;
  --crd-palette-error-20: #690005;
  --crd-palette-error-30: #93000a;
  --crd-palette-error-40: #ba1a1a;
  --crd-palette-error-50: #de3730;
  --crd-palette-error-60: #ff5449;
  --crd-palette-error-70: #ff897d;
  --crd-palette-error-80: #ffb4ab;
  --crd-palette-error-90: #ffdad6;
  --crd-palette-error-95: #ffedea;
  --crd-palette-error-99: #fffbff;
  --crd-palette-error-100: #ffffff;

  /* Semilla de marca, literal. Solo para logo/hero/marketing — nunca como token de rol. */
  --crd-brand-seed: #ffcc00;
  --crd-brand-black: #2b2b2b;
  --crd-brand-white: #ffffff;
}

/* ---- Roles semánticos: tema claro (por defecto) ---- */
:root {
  --crd-primary: var(--crd-palette-primary-40);
  --crd-on-primary: var(--crd-palette-primary-100);
  --crd-primary-container: var(--crd-palette-primary-90);
  --crd-on-primary-container: var(--crd-palette-primary-30);

  --crd-secondary: var(--crd-palette-secondary-40);
  --crd-on-secondary: var(--crd-palette-secondary-100);
  --crd-secondary-container: var(--crd-palette-secondary-90);
  --crd-on-secondary-container: var(--crd-palette-secondary-30);

  --crd-tertiary: var(--crd-palette-tertiary-40);
  --crd-on-tertiary: var(--crd-palette-tertiary-100);
  --crd-tertiary-container: var(--crd-palette-tertiary-90);
  --crd-on-tertiary-container: var(--crd-palette-tertiary-30);

  --crd-error: var(--crd-palette-error-40);
  --crd-on-error: var(--crd-palette-error-100);
  --crd-error-container: var(--crd-palette-error-90);
  --crd-on-error-container: var(--crd-palette-error-20);

  --crd-background: var(--crd-palette-neutral-98);
  --crd-on-background: var(--crd-palette-neutral-10);
  --crd-surface: var(--crd-palette-neutral-98);
  --crd-on-surface: var(--crd-palette-neutral-10);
  --crd-surface-variant: var(--crd-palette-neutral-variant-90);
  --crd-on-surface-variant: var(--crd-palette-neutral-variant-30);

  --crd-outline: var(--crd-palette-neutral-variant-50);
  --crd-outline-variant: var(--crd-palette-neutral-variant-80);

  --crd-surface-dim: var(--crd-palette-neutral-87);
  --crd-surface-bright: var(--crd-palette-neutral-98);
  --crd-surface-container-lowest: var(--crd-palette-neutral-100);
  --crd-surface-container-low: var(--crd-palette-neutral-96);
  --crd-surface-container: var(--crd-palette-neutral-94);
  --crd-surface-container-high: var(--crd-palette-neutral-92);
  --crd-surface-container-highest: var(--crd-palette-neutral-90);

  --crd-inverse-surface: var(--crd-palette-neutral-20);
  --crd-inverse-on-surface: var(--crd-palette-neutral-95);
  --crd-inverse-primary: var(--crd-palette-primary-80);

  /* Texto y iconos de un control deshabilitado (decisión #120): un tono legible (≥ 4,5:1 sobre las
     superficies) en lugar de la opacidad 0,38 de M3, que dejaba la etiqueta en 2,3:1. */
  --crd-on-surface-disabled: var(--crd-palette-neutral-40);
}

/* ---- Roles semánticos: tema oscuro ---- */
[data-theme='dark'] {
  --crd-primary: var(--crd-palette-primary-80);
  --crd-on-primary: var(--crd-palette-primary-20);
  --crd-primary-container: var(--crd-palette-primary-30);
  --crd-on-primary-container: var(--crd-palette-primary-90);

  --crd-secondary: var(--crd-palette-secondary-80);
  --crd-on-secondary: var(--crd-palette-secondary-20);
  --crd-secondary-container: var(--crd-palette-secondary-30);
  --crd-on-secondary-container: var(--crd-palette-secondary-90);

  --crd-tertiary: var(--crd-palette-tertiary-80);
  --crd-on-tertiary: var(--crd-palette-tertiary-20);
  --crd-tertiary-container: var(--crd-palette-tertiary-30);
  --crd-on-tertiary-container: var(--crd-palette-tertiary-90);

  --crd-error: var(--crd-palette-error-80);
  --crd-on-error: var(--crd-palette-error-20);
  --crd-error-container: var(--crd-palette-error-30);
  --crd-on-error-container: var(--crd-palette-error-90);

  --crd-background: var(--crd-palette-neutral-6);
  --crd-on-background: var(--crd-palette-neutral-90);
  --crd-surface: var(--crd-palette-neutral-6);
  --crd-on-surface: var(--crd-palette-neutral-90);
  --crd-surface-variant: var(--crd-palette-neutral-variant-30);
  --crd-on-surface-variant: var(--crd-palette-neutral-variant-80);

  --crd-outline: var(--crd-palette-neutral-variant-60);
  --crd-outline-variant: var(--crd-palette-neutral-variant-30);

  --crd-surface-dim: var(--crd-palette-neutral-6);
  --crd-surface-bright: var(--crd-palette-neutral-24);
  --crd-surface-container-lowest: var(--crd-palette-neutral-4);
  --crd-surface-container-low: var(--crd-palette-neutral-10);
  --crd-surface-container: var(--crd-palette-neutral-12);
  --crd-surface-container-high: var(--crd-palette-neutral-17);
  --crd-surface-container-highest: var(--crd-palette-neutral-22);

  --crd-inverse-surface: var(--crd-palette-neutral-90);
  --crd-inverse-on-surface: var(--crd-palette-neutral-20);
  --crd-inverse-primary: var(--crd-palette-primary-40);

  --crd-on-surface-disabled: var(--crd-palette-neutral-60);
}

/* ---- Roles compuestos: iguales en los dos temas ---- */
/* Velo de las superficies modales (diálogo, cajón y hojas modales): negro al 32 %, como M3 (decisión
   #127, 2026-09-16). Es una mezcla sobre la paleta y no un alias, por eso los tests lo tratan aparte. */
:root {
  --crd-scrim: color-mix(in srgb, var(--crd-palette-neutral-0) 32%, transparent);
}

/* @carlosrojaso/crd-tokens — typography. Valores de Confluence (página 02 — Typography Tokens), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* ---- Tipografía — Inter Variable, escala M3 de 15 estilos (página 02) ---- */
:root {
  --crd-font-brand: 'Inter Variable', system-ui, sans-serif;
  --crd-font-plain: 'Inter Variable', system-ui, sans-serif;

  --crd-weight-regular: 400;
  --crd-weight-medium: 500;

  --crd-display-lg-size: 57px;
  --crd-display-lg-lh: 64px;
  --crd-display-lg-tracking: -0.25px;
  --crd-display-lg-weight: var(--crd-weight-regular);
  --crd-display-md-size: 45px;
  --crd-display-md-lh: 52px;
  --crd-display-md-tracking: 0px;
  --crd-display-md-weight: var(--crd-weight-regular);
  --crd-display-sm-size: 36px;
  --crd-display-sm-lh: 44px;
  --crd-display-sm-tracking: 0px;
  --crd-display-sm-weight: var(--crd-weight-regular);

  --crd-headline-lg-size: 32px;
  --crd-headline-lg-lh: 40px;
  --crd-headline-lg-tracking: 0px;
  --crd-headline-lg-weight: var(--crd-weight-regular);
  --crd-headline-md-size: 28px;
  --crd-headline-md-lh: 36px;
  --crd-headline-md-tracking: 0px;
  --crd-headline-md-weight: var(--crd-weight-regular);
  --crd-headline-sm-size: 24px;
  --crd-headline-sm-lh: 32px;
  --crd-headline-sm-tracking: 0px;
  --crd-headline-sm-weight: var(--crd-weight-regular);

  --crd-title-lg-size: 22px;
  --crd-title-lg-lh: 28px;
  --crd-title-lg-tracking: 0px;
  --crd-title-lg-weight: var(--crd-weight-regular);
  --crd-title-md-size: 16px;
  --crd-title-md-lh: 24px;
  --crd-title-md-tracking: 0.15px;
  --crd-title-md-weight: var(--crd-weight-medium);
  --crd-title-sm-size: 14px;
  --crd-title-sm-lh: 20px;
  --crd-title-sm-tracking: 0.1px;
  --crd-title-sm-weight: var(--crd-weight-medium);

  --crd-body-lg-size: 16px;
  --crd-body-lg-lh: 24px;
  --crd-body-lg-tracking: 0.5px;
  --crd-body-lg-weight: var(--crd-weight-regular);
  --crd-body-md-size: 14px;
  --crd-body-md-lh: 20px;
  --crd-body-md-tracking: 0.25px;
  --crd-body-md-weight: var(--crd-weight-regular);
  --crd-body-sm-size: 12px;
  --crd-body-sm-lh: 16px;
  --crd-body-sm-tracking: 0.4px;
  --crd-body-sm-weight: var(--crd-weight-regular);

  --crd-label-lg-size: 14px;
  --crd-label-lg-lh: 20px;
  --crd-label-lg-tracking: 0.1px;
  --crd-label-lg-weight: var(--crd-weight-medium);
  --crd-label-md-size: 12px;
  --crd-label-md-lh: 16px;
  --crd-label-md-tracking: 0.5px;
  --crd-label-md-weight: var(--crd-weight-medium);
  --crd-label-sm-size: 11px;
  --crd-label-sm-lh: 16px;
  --crd-label-sm-tracking: 0.5px;
  --crd-label-sm-weight: var(--crd-weight-medium);
}

/* @carlosrojaso/crd-tokens — spacing. Valores de Confluence (página 03), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* ---- Espaciado — rejilla de 4px (página 03) ---- */
:root {
  --crd-space-0: 0px;
  --crd-space-1: 4px;
  --crd-space-2: 8px;
  --crd-space-3: 12px;
  --crd-space-4: 16px;
  --crd-space-5: 20px;
  --crd-space-6: 24px;
  --crd-space-8: 32px;
  --crd-space-10: 40px;
  --crd-space-12: 48px;
  --crd-space-16: 64px;
  --crd-space-24: 96px;
}

/* @carlosrojaso/crd-tokens — shape. Valores de Confluence (página 03), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* ---- Forma / radio de esquina (página 03) ---- */
:root {
  --crd-shape-none: 0px;
  --crd-shape-x-small: 4px;
  --crd-shape-small: 8px;
  --crd-shape-medium: 12px;
  --crd-shape-large: 16px;
  --crd-shape-x-large: 28px;
  --crd-shape-full: 9999px;
}

/* @carlosrojaso/crd-tokens — elevation. Valores de Confluence (página 03), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* ---- Elevación (página 03) — claro usa sombra; oscuro usa surface-container tonal ---- */
:root {
  --crd-elevation-0: none;
  --crd-elevation-1: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
  --crd-elevation-2: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 2px 6px 2px rgba(0, 0, 0, 0.15);
  --crd-elevation-3: 0px 1px 3px rgba(0, 0, 0, 0.3), 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
  --crd-elevation-4: 0px 2px 3px rgba(0, 0, 0, 0.3), 0px 6px 10px 4px rgba(0, 0, 0, 0.15);
  --crd-elevation-5: 0px 4px 4px rgba(0, 0, 0, 0.3), 0px 8px 12px 6px rgba(0, 0, 0, 0.15);
}
[data-theme='dark'] {
  --crd-elevation-0: none;
  --crd-elevation-1: none;
  --crd-elevation-2: none;
  --crd-elevation-3: none;
  --crd-elevation-4: none;
  --crd-elevation-5: none;
  /* La elevación en oscuro la lleva la superficie tonal (--crd-surface-container-*), no la sombra. */
}

/* @carlosrojaso/crd-tokens — motion («calm-adjusted»). Valores de Confluence (página 04 — Motion System), transcritos desde
   docs/reference/tokens.reference.css. Cualquier cambio de valor se acuerda primero en Confluence. */

/* ---- Movimiento — «calm-adjusted», 30–60 % más lento que M3 Standard genérico (página 04) ---- */
:root {
  --crd-motion-duration-instant: 120ms;
  --crd-motion-duration-fast: 220ms;
  --crd-motion-duration-default: 400ms;
  --crd-motion-duration-moderate: 550ms;
  --crd-motion-duration-slow: 750ms;
  --crd-motion-duration-dramatic: 1100ms;

  --crd-motion-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --crd-motion-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --crd-motion-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --crd-motion-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --crd-motion-duration-instant: 0ms;
    --crd-motion-duration-fast: 0ms;
    --crd-motion-duration-default: 0ms;
    --crd-motion-duration-moderate: 0ms;
    --crd-motion-duration-slow: 0ms;
    --crd-motion-duration-dramatic: 0ms;
  }
}

/* Transiciones compuestas (nivel de implementación): Stylelint solo admite `transition: var(--...)`
   en los componentes, así que se componen aquí a partir de duración + easing documentados.
   Regla direccional de Confluence: entrada → decelerate, salida → accelerate, cambio de estado → standard. */
:root {
  --crd-transition-press:
    transform var(--crd-motion-duration-fast) var(--crd-motion-ease-standard),
    background-color var(--crd-motion-duration-fast) var(--crd-motion-ease-standard);
  --crd-transition-state:
    background-color var(--crd-motion-duration-fast) var(--crd-motion-ease-standard),
    border-color var(--crd-motion-duration-fast) var(--crd-motion-ease-standard),
    color var(--crd-motion-duration-fast) var(--crd-motion-ease-standard),
    box-shadow var(--crd-motion-duration-fast) var(--crd-motion-ease-standard);
  --crd-transition-enter:
    opacity var(--crd-motion-duration-default) var(--crd-motion-ease-decelerate),
    transform var(--crd-motion-duration-default) var(--crd-motion-ease-decelerate);
  --crd-transition-exit:
    opacity var(--crd-motion-duration-fast) var(--crd-motion-ease-accelerate),
    transform var(--crd-motion-duration-fast) var(--crd-motion-ease-accelerate);

  /* Superficies modales, según la tabla «Component motion patterns» de la página 04: abren en moderate +
     emphasized (scale 0.97→1) y cierran en default + accelerate (scale 1→0.98). El transform lo aplica el
     componente; aquí solo se fijan propiedades, duración y easing. */
  --crd-transition-modal-open:
    opacity var(--crd-motion-duration-moderate) var(--crd-motion-ease-emphasized),
    transform var(--crd-motion-duration-moderate) var(--crd-motion-ease-emphasized);
  --crd-transition-modal-close:
    opacity var(--crd-motion-duration-default) var(--crd-motion-ease-accelerate),
    transform var(--crd-motion-duration-default) var(--crd-motion-ease-accelerate);
}

/* @carlosrojaso/crd-tokens — base. Resets mínimos y valores por defecto del documento; los
   componentes cargan su propio estilo. Anillo de foco: solo teclado (:focus-visible). */
:root {
  color-scheme: light;
}
[data-theme='dark'] {
  color-scheme: dark;
}
body {
  margin: 0;
  font-family: var(--crd-font-plain);
  font-size: var(--crd-body-md-size);
  line-height: var(--crd-body-md-lh);
  letter-spacing: var(--crd-body-md-tracking);
  color: var(--crd-on-surface);
  background: var(--crd-surface);
  -webkit-font-smoothing: antialiased;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
a {
  color: var(--crd-primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--crd-primary);
  outline-offset: 2px;
}
@keyframes crd-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tema oscuro automatico: mismos valores que [data-theme='dark'], segun la preferencia del dispositivo. */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
  --crd-primary: var(--crd-palette-primary-80);
  --crd-on-primary: var(--crd-palette-primary-20);
  --crd-primary-container: var(--crd-palette-primary-30);
  --crd-on-primary-container: var(--crd-palette-primary-90);

  --crd-secondary: var(--crd-palette-secondary-80);
  --crd-on-secondary: var(--crd-palette-secondary-20);
  --crd-secondary-container: var(--crd-palette-secondary-30);
  --crd-on-secondary-container: var(--crd-palette-secondary-90);

  --crd-tertiary: var(--crd-palette-tertiary-80);
  --crd-on-tertiary: var(--crd-palette-tertiary-20);
  --crd-tertiary-container: var(--crd-palette-tertiary-30);
  --crd-on-tertiary-container: var(--crd-palette-tertiary-90);

  --crd-error: var(--crd-palette-error-80);
  --crd-on-error: var(--crd-palette-error-20);
  --crd-error-container: var(--crd-palette-error-30);
  --crd-on-error-container: var(--crd-palette-error-90);

  --crd-background: var(--crd-palette-neutral-6);
  --crd-on-background: var(--crd-palette-neutral-90);
  --crd-surface: var(--crd-palette-neutral-6);
  --crd-on-surface: var(--crd-palette-neutral-90);
  --crd-surface-variant: var(--crd-palette-neutral-variant-30);
  --crd-on-surface-variant: var(--crd-palette-neutral-variant-80);

  --crd-outline: var(--crd-palette-neutral-variant-60);
  --crd-outline-variant: var(--crd-palette-neutral-variant-30);

  --crd-surface-dim: var(--crd-palette-neutral-6);
  --crd-surface-bright: var(--crd-palette-neutral-24);
  --crd-surface-container-lowest: var(--crd-palette-neutral-4);
  --crd-surface-container-low: var(--crd-palette-neutral-10);
  --crd-surface-container: var(--crd-palette-neutral-12);
  --crd-surface-container-high: var(--crd-palette-neutral-17);
  --crd-surface-container-highest: var(--crd-palette-neutral-22);

  --crd-inverse-surface: var(--crd-palette-neutral-90);
  --crd-inverse-on-surface: var(--crd-palette-neutral-20);
  --crd-inverse-primary: var(--crd-palette-primary-40);

  --crd-on-surface-disabled: var(--crd-palette-neutral-60);
  --crd-elevation-0: none;
  --crd-elevation-1: none;
  --crd-elevation-2: none;
  --crd-elevation-3: none;
  --crd-elevation-4: none;
  --crd-elevation-5: none;
  /* La elevación en oscuro la lleva la superficie tonal (--crd-surface-container-*), no la sombra. */
  }
}