:root {
    color-scheme: light;

    /* Primer adapted: semantic application tokens. */
    --color-fondo: #f6f8fa;
    --color-superficie: #ffffff;
    --color-superficie-alterna: #eff2f5;
    --color-superficie-suave: #f6f8fa;
    --color-borde: #d1d9e0;
    --color-borde-fuerte: #818b98;
    --color-texto: #1f2328;
    --color-texto-suave: #59636e;
    --color-texto-inverso: #ffffff;

    /* Azul corporativo para acciones y navegación principales. */
    --color-primario: #155eef;
    --color-primario-hover: #104ec4;
    --color-acento: #0969da;
    --color-exito: #1a7f37;
    --color-advertencia: #9a6700;
    --color-severo: #bc4c00;
    --color-peligro: #cf222e;
    --color-informacion: #0969da;

    --color-exito-suave: #dafbe1;
    --color-exito-borde: #4ac26b66;
    --color-advertencia-suave: #fff8c5;
    --color-advertencia-borde: #d4a72c66;
    --color-peligro-suave: #ffebe9;
    --color-peligro-borde: #ff818266;
    --color-neutral-suave: #eff2f5;
    --color-neutral-borde: #d1d9e0;

    --color-sombra: #25292e14;
    --sombra-modal: 0 20px 60px #25292e3d;
    --color-negro: #000000;
    --color-capa: #1f232880;
    --color-punto-mudo: #818b98;

    --color-barra: #25292e;
    --color-barra-texto: #f0f6fc;
    --color-barra-borde: #444c56;
    --color-barra-borde-suave: #f0f6fc1f;
    --color-barra-marca: #58a6ff;
    --color-barra-marca-texto: #79c0ff;
    --color-barra-caption: #afb8c1;
    --color-barra-seccion: #afb8c1;
    --color-barra-enlace: #d0d7de;
    --color-barra-enlace-hover: #343b43;
    --color-barra-activo: #58a6ff;

    /* Compatibility aliases while component styles migrate to semantic names. */
    --color-teal: var(--color-primario);
    --color-teal-fuerte: var(--color-primario-hover);
    --color-azul: var(--color-acento);
    --color-ocre: var(--color-advertencia);
    --color-terracota: var(--color-peligro);
    --border-subtle: var(--color-borde);
    --text-muted: var(--color-texto-suave);
    --surface: var(--color-superficie);
    --text-primary: var(--color-texto);
    --radio: 8px;

    /* Primer semantic aliases used by isolated component styles. */
    --canvas-default: var(--color-superficie);
    --canvas-subtle: var(--color-superficie-suave);
    --fg-default: var(--color-texto);
    --fg-muted: var(--color-texto-suave);
    --fg-accent: var(--color-acento);
    --border-default: var(--color-borde);
    --border-muted: color-mix(in srgb, var(--color-borde) 72%, transparent);
    --border-accent-emphasis: var(--color-acento);
    --accent-subtle: color-mix(in srgb, var(--color-acento) 12%, var(--color-superficie));
    --success-fg: var(--color-exito);
    --bg-default: var(--canvas-default);
    --bg-subtle: var(--canvas-subtle);
    --accent-fg: var(--fg-accent);
    --focus-outline: var(--color-acento);
    --color-superficie-secundaria: var(--color-superficie-suave);

    /* Compatibility with the long-form Primer token names. */
    --color-canvas-default: var(--canvas-default);
    --color-canvas-subtle: var(--canvas-subtle);
    --color-fg-default: var(--fg-default);
    --color-fg-muted: var(--fg-muted);
    --color-fg-on-emphasis: var(--color-texto-inverso);
    --color-border-default: var(--border-default);
    --color-border-muted: var(--border-muted);
    --color-accent-fg: var(--fg-accent);
    --color-accent-emphasis: var(--color-acento);
    --color-accent-subtle: var(--accent-subtle);
    --color-success-fg: var(--color-exito);
    --color-success-emphasis: var(--color-exito);
    --color-success-muted: var(--color-exito-borde);
    --color-success-subtle: var(--color-exito-suave);
    --color-attention-fg: var(--color-advertencia);
    --color-attention-emphasis: var(--color-advertencia);
    --color-attention-subtle: var(--color-advertencia-suave);
    --color-danger-fg: var(--color-peligro);
    --color-danger-subtle: var(--color-peligro-suave);
    --shadow-resting-small: 0 1px 2px var(--color-sombra);
    --shadow-resting-medium: 0 3px 10px var(--color-sombra);
    --shadow-floating-large: var(--sombra-modal);
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-fondo: #0d1117;
    --color-superficie: #161b22;
    --color-superficie-alterna: #21262d;
    --color-superficie-suave: #161b22;
    --color-borde: #30363d;
    --color-borde-fuerte: #484f58;
    --color-texto: #e6edf3;
    --color-texto-suave: #8b949e;
    --color-texto-inverso: #ffffff;

    --color-primario: #2f81f7;
    --color-primario-hover: #539bf7;
    --color-acento: #2f81f7;
    --color-exito: #3fb950;
    --color-advertencia: #d29922;
    --color-severo: #f0883e;
    --color-peligro: #f85149;
    --color-informacion: #2f81f7;

    --color-exito-suave: #2ea04326;
    --color-exito-borde: #3fb95066;
    --color-advertencia-suave: #bb800926;
    --color-advertencia-borde: #d2992266;
    --color-peligro-suave: #f851491a;
    --color-peligro-borde: #f8514966;
    --color-neutral-suave: #21262d;
    --color-neutral-borde: #30363d;

    --color-sombra: #01040966;
    --sombra-modal: 0 20px 60px #010409d9;
    --color-negro: #000000;
    --color-capa: #010409b3;
    --color-punto-mudo: #6e7681;

    --color-barra: #010409;
    --color-barra-texto: #f0f6fc;
    --color-barra-borde: #21262d;
    --color-barra-borde-suave: #f0f6fc1a;
    --color-barra-marca: #58a6ff;
    --color-barra-marca-texto: #79c0ff;
    --color-barra-caption: #8b949e;
    --color-barra-seccion: #8b949e;
    --color-barra-enlace: #c9d1d9;
    --color-barra-enlace-hover: #21262d;
    --color-barra-activo: #58a6ff;
}