/* ========================================
   Tokens de color compartidos (light / dark)
   Home, case studies y design-tokens
   ======================================== */
:root {
    color-scheme: light;
    --bg:             #F5F8FA;
    --text:           #5F6A84;
    --text-secondary: #5F6A84;
    --text-muted:     #5F6A84;
    --text-em:        #0D2C75;
    --heading:        #0D2C75;
    --border:         #D0E3F5;
    --link-line:      #5F6A84;
    --phase-bg:       #E1ECF7;
    --quote-border:   #D0E3F5;
    --bullet:         #5F6A84;
    --dot:            188, 214, 235;
    --dot-base:       0.32;
    --dot-max:        0.82;
    --dot-fade-delay: 200;
    --dot-fade-duration: 280;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --bg:             #091020;
        --text:           #7B86A0;
        --text-secondary: #7B86A0;
        --text-muted:     #7B86A0;
        --text-em:        #E1ECF7;
        --heading:        #E1ECF7;
        --border:         #26314A;
        --link-line:      #7B86A0;
        --phase-bg:       #131C2F;
        --quote-border:   #26314A;
        --bullet:         #7B86A0;
        --dot:            74, 95, 124;
        --dot-base:       0;
        --dot-max:        0.68;
        --dot-fade-delay: 80;
        --dot-fade-duration: 200;
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --bg:             #091020;
    --text:           #7B86A0;
    --text-secondary: #7B86A0;
    --text-muted:     #7B86A0;
    --text-em:        #E1ECF7;
    --heading:        #E1ECF7;
    --border:         #26314A;
    --link-line:      #7B86A0;
    --phase-bg:       #131C2F;
    --quote-border:   #26314A;
    --bullet:         #7B86A0;
    --dot:            74, 95, 124;
    --dot-base:       0;
    --dot-max:        0.68;
    --dot-fade-delay: 80;
    --dot-fade-duration: 200;
}

html {
    background-color: var(--bg);
}