/* Loaded only with the dark appearance (see data-hs-appearance in index.html). Tells the browser
   to draw its native controls - date picker icon and popup, scrollbars - for a dark page. */
:root {
    color-scheme: dark;
    --bs-secondary-color: #91989e;
    --bs-heading-color: #fff;
    --ayc-card-bg: #25282a;
}

/* Secondary text and links: the theme's dark grey (#6d747b) is too faint on the dark cards and
   message bubbles; they take its readable muted colour instead. */
html .text-secondary,
html .link-secondary {
    color: #91989e !important;
}

/* Loading placeholders: a lighter shade of the card rather than the light theme's pale bars. */
.skeleton-line,
.skeleton-circle {
    background-color: rgba(255, 255, 255, 0.08);
}

/* The Signal's facts sit on a raised tile: white in the light theme, a lighter shade of the card
   here, so their light text stays readable. */
.session-signal-fact {
    background-color: rgba(255, 255, 255, 0.06);
}

/* The session thread's connector takes the dark theme's own step line colour. */
.step.session-thread .step-item.step-linked > .step-content-wrapper::after {
    border-left-color: #2f3235;
}

/* The team's tiles and secondary text, tuned for the dark card. */
.team {
    --team-tile-bg: rgba(255, 255, 255, 0.045);
    --team-muted: #91989e;
}

/* Clickable list rows: the theme gives their text the card's own colour (#25282a), so a hovered row
   - "À toi", the organization choice - lost its label. They keep the list's readable text. */
.list-group {
    --bs-list-group-action-color: #c5c8cc;
    --bs-list-group-action-hover-color: #fff;
}

/* The short logo of the narrowest screens, in its dark variant (see app.css). */
@media (max-width: 359.98px) {
    #header .navbar-brand-logo-mini[data-hs-theme-appearance="default"] {
        display: none;
    }

    #header .navbar-brand-logo-mini[data-hs-theme-appearance="dark"] {
        display: inline;
    }
}

/* Figure colours lightened for the dark cards. */
.health-good { color: #3ddbb5; }
.health-watch { color: #f5b95b; }
.health-poor { color: #ff7b98; }

/* The Signal's statuses, badges and cards alike: the light theme's tones are too dark to read on
   the dark cards; they take the same lightened tones as the figures above. */
.badge.signal-status--reached,
.session-signal--reached { --signal-status-rgb: 61, 219, 181; }

.badge.signal-status--notReached,
.session-signal--notReached { --signal-status-rgb: 255, 123, 152; }

.badge.signal-status--notObservable,
.session-signal--notObservable { --signal-status-rgb: 245, 185, 91; }

.badge.signal-status--noSignal { --signal-status-rgb: 145, 152, 158; }

/* The gradient titles take the text gradient's light tones: the deeper ones fade into the dark card. */
.gradient-text.gradient-title {
    background-image: linear-gradient(90deg, #6fb1fc, #9b4ddb 55%, #c86dd7);
}

/* The theme's dark list groups give a clickable row the card's own colour for its text: on hover,
   against the lighter row, it vanishes ("À toi"). The row keeps the list's text colour, and hover
   lights it up instead. Prefixed with html to win over the theme's own rule, loaded after this file. */
html .list-group {
    --bs-list-group-action-color: var(--bs-list-group-color);
    --bs-list-group-action-hover-color: var(--bs-heading-color);
}

/* The way in: the landing's dark ground and glass, and the Signal's green as the dark theme draws it. */
.login {
    --login-cover-bg: #232629;
    --login-glass-bg: rgba(37, 40, 42, 0.5);
    --login-glass-border: rgba(255, 255, 255, 0.1);
    --login-glass-highlight: rgba(255, 255, 255, 0.06);
    --login-bubble-bg: rgba(255, 255, 255, 0.06);
    --login-light: 0.2;
    --login-shadow: 0 1.25rem 3rem -0.75rem rgba(0, 0, 0, 0.6);
    --login-offer-rgb: 61, 219, 181;
}