/* Colours and font of the pages of passkey-access (ADR 0013): the look "Klassisch" of this app, light or dark after
   the device. The pages know nothing of the app's own setting Darstellung. Barlow comes from /fonts, open without
   sign-in (auth.public-paths). */
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('/fonts/Barlow-600.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
    --access-font: 'Barlow', 'DIN Alternate', system-ui, -apple-system, sans-serif;
    --access-background: #FFFFFF;
    --access-surface: #FFFFFF;
    --access-text: #0B0B0C;
    --access-muted: #6B7280;
    --access-accent: #0A74C9;
    --access-on-accent: #FFFFFF;
    --access-border: #D5D8DD;
    --access-danger: #B3261E;
}

@media (prefers-color-scheme: dark) {
    :root {
        --access-background: #000000;
        --access-surface: #000000;
        --access-text: #F2F2F2;
        --access-muted: #A0A4AB;
        --access-accent: #4DAAF5;
        --access-on-accent: #000000;
        --access-border: #3A3D42;
        --access-danger: #FF7A6E;
    }
}

/* Buttons as in the app's styles (app.css, [data-style]): pills, the main action black (white in the dark), every
   other action outlined in the text colour, deleting and rejecting in red; no button filled in the accent. */
:root {
    --access-inverse: #0B0B0C;
    --access-on-inverse: #FFFFFF;
    --access-inverse-hover: #3F4550;
}

@media (prefers-color-scheme: dark) {
    :root {
        --access-inverse: #F2F2F2;
        --access-on-inverse: #000000;
        --access-inverse-hover: #C7CBD1;
    }
}

button {
    border: 1px solid var(--access-inverse);
    border-radius: 999px;
    color: var(--access-on-inverse);
    background: var(--access-inverse);
}

button:hover {
    border-color: var(--access-inverse-hover);
    background: var(--access-inverse-hover);
}

/* Lock or unlock an account is no main action */
button.access-secondary,
.access-account button {
    border-color: var(--access-border);
    color: var(--access-text);
    background: transparent;
}

button.access-secondary:hover,
.access-account button:hover {
    border-color: var(--access-border);
    background: var(--access-border);
}

#reject-button,
.access-account button.access-secondary {
    color: var(--access-danger);
}

.access-card,
.access-request,
.access-account {
    border-radius: 0;
}