:root {
    /* Sistema de contenedores */
    --container-wide: 1024px;
    --container-content: 900px;
    --container-text: 800px;
    --container-narrow: 700px;
    --layout-gutter: 20px;
    --layout-inline-size: calc(100vw - 40px);

    /* Superficies */
    --surface-deep: #1F242C;
    --surface-deep-muted: #384151;
    --surface-reel: #1D2026;
    --surface-card: #EFF5FF;
    --surface-light: #E6EFFF;
    --surface-white: #FFFFFF;
    --surface-soft: #829DC7;

    /* Textos */
    --text-on-light: #1F242C;
    --text-on-dark: #E6EFFF;
    --text-on-dark-strong: #FFFFFF;
    --text-light-soft: #EFF5FF;
    --text-secondary: #627490;
    --text-muted: #8294B4;
    --text-soft: #829DC7;
    --text-deep-muted: #384151;
    --text-deep: #2D353E;
    --text-agenda-muted: #90A5B9;

    /* Acentos, bordes y controles */
    --accent-primary: #649A0C;
    --accent-muted: #4C6753;
    --border-strong: #1F242C;
    --border-black: #000000;
    --border-light: #FFFFFF;
    --border-muted: #8294B4;
    --border-soft: #BACBE8;
    --button-primary-background: #1F242C;
    --button-primary-text: #FFFFFF;
    --button-primary-text-soft: #EFF5FF;
    --button-primary-hover: #384151;
    --surface-agenda-muted: #90A5B9;

    /* Sombras y transparencias */
    --shadow-card: #627490;
    --shadow-soft: #8294B4;
    --shadow-cool: #829DC7;
    --shadow-deep: #2D353E;
    --shadow-strong: #1F242C;
    --shadow-black: #000000;
    --overlay-menu: rgba(31, 36, 44, 0.98);
    --overlay-shadow: rgba(0, 0, 0, 0.5);
    --overlay-shadow-strong: rgba(0, 0, 0, 0.7);
    --surface-hover-light: rgba(255, 255, 255, 0.1);
    --surface-hover-dark: rgba(0, 0, 0, 0.1);

    /* Alias conservados para componentes existentes */
    --blanco: #F0F0F0;
    --shadow-dark: var(--shadow-deep) 1px 4px 11px;
    --boton-azul-claro: #F0F0F0;
}

html[data-theme="darkMode"] {
    color-scheme: dark;
    --page-background: var(--surface-deep);
    --page-text: var(--text-on-dark);
    --footer-back-background: #282D34;
    --footer-back-item-background: #30353C;
    --footer-back-text: var(--text-on-dark);
    --footer-main-background: var(--surface-light);
    --footer-main-text: var(--text-on-light);
    --footer-divider: #30353C;
    --footer-corte-image: url("../../imgBase/elements/element-footer-corte-onDark.svg");
    --header-shadow: #172134;
}

html[data-theme="lightMode"] {
    color-scheme: light;
    --page-background: var(--surface-light);
    --page-text: var(--text-on-light);
    --footer-back-background: #D2DAE6;
    --footer-back-item-background: #C2CCDB;
    --footer-back-text: var(--text-on-light);
    --footer-main-background: var(--surface-deep);
    --footer-main-text: var(--text-on-dark);
    --footer-divider: #C2CCDB;
    --footer-corte-image: url("../../imgBase/elements/element-footer-corte-onLight.svg");
    --header-shadow: #607293;
}