/*
 * G-Nómina · base visual
 * Tokens semánticos compartidos por el shell y sus componentes.
 */
body.app-shell {
    color-scheme: light;
    --app-canvas: #eef3f8;
    --app-surface: #ffffff;
    --app-surface-raised: #ffffff;
    --app-surface-subtle: #f4f7fb;
    --app-surface-muted: #edf2f7;
    --app-input: #ffffff;
    --app-input-muted: #f0f4f8;
    --app-text: #172033;
    --app-text-secondary: #344054;
    --app-text-muted: #667085;
    --app-text-disabled: #7b8798;
    --app-border: #d8e1ec;
    --app-border-strong: #becbdc;
    --app-primary: #1a468f;
    --app-primary-hover: #153a78;
    --app-primary-active: #102f65;
    --app-primary-soft: rgba(26, 70, 143, 0.09);
    --app-primary-border: rgba(26, 70, 143, 0.18);
    --app-focus: #397ccb;
    --app-success: #167249;
    --app-success-action: #167249;
    --app-success-action-hover: #105c3a;
    --app-success-soft: #e8f7ef;
    --app-warning: #8a5500;
    --app-warning-soft: #fff6df;
    --app-danger: #b42318;
    --app-danger-action: #b42318;
    --app-danger-action-hover: #941c13;
    --app-danger-hover: #941c13;
    --app-danger-soft: #fff0ee;
    --app-info: #245b9e;
    --app-info-soft: #edf5ff;
    --app-radius-xs: 7px;
    --app-radius-sm: 9px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;
    --app-shadow-sm: 0 4px 14px rgba(15, 30, 50, 0.07);
    --app-shadow-md: 0 14px 36px rgba(15, 30, 50, 0.12);
    --app-shadow-lg: 0 24px 65px rgba(15, 30, 50, 0.22);
    --app-control-height: 42px;
    --app-transition: 160ms ease;

    /* Alias para los estilos heredados mientras se migran por módulo. */
    --color-e: var(--app-surface-subtle);
    --color-b: var(--app-primary);
    --color-b1: var(--app-primary-hover);
    --surface-bg: var(--app-surface);
    --surface-solid: var(--app-surface-raised);
    --surface-muted: var(--app-surface-subtle);
    --text-main: var(--app-text);
    --text-muted-dark: var(--app-text-muted);
    --border-soft: var(--app-border);
}

body.app-shell.theme-dark {
    color-scheme: dark;
    --app-canvas: #0c1728;
    --app-surface: #17253d;
    --app-surface-raised: #1d2e4b;
    --app-surface-subtle: #1d304e;
    --app-surface-muted: #142139;
    --app-input: #101f35;
    --app-input-muted: #13233a;
    --app-text: #eef4ff;
    --app-text-secondary: #dce8f8;
    --app-text-muted: #b9c8dc;
    --app-text-disabled: #91a3bb;
    --app-border: rgba(142, 174, 220, 0.28);
    --app-border-strong: #425e86;
    --app-primary: #2f76d2;
    --app-primary-hover: #255fae;
    --app-primary-active: #1e5199;
    --app-primary-soft: rgba(89, 148, 230, 0.16);
    --app-primary-border: rgba(125, 180, 255, 0.28);
    --app-focus: #9cc6ff;
    --app-success: #48b987;
    --app-success-action: #176b4a;
    --app-success-action-hover: #12573c;
    --app-success-soft: #183f35;
    --app-warning: #ffd37a;
    --app-warning-soft: #46371d;
    --app-danger: #ff7b83;
    --app-danger-action: #a62b35;
    --app-danger-action-hover: #85212a;
    --app-danger-hover: #de5f69;
    --app-danger-soft: #452a32;
    --app-info: #9cc6ff;
    --app-info-soft: #213b60;
    --app-shadow-sm: 0 5px 18px rgba(2, 8, 20, 0.2);
    --app-shadow-md: 0 18px 44px rgba(2, 8, 20, 0.38);
    --app-shadow-lg: 0 28px 75px rgba(2, 8, 20, 0.58);
}