/*
 * Portals shared styles
 * Loaded by every page. Put site-wide design tokens and reusable components here.
 * Keep page-specific layout rules in a separate page stylesheet.
 */

:root {
    --portals-ink: #171717;
    --portals-paper: #f3f1ed;
    --portals-panel: #ffffff;
    --portals-muted: #68645e;
    --portals-accent: #4b6575;
    --portals-accent-soft: #dce5e9;
    --portals-danger: #8c2020;
    --portals-radius: 7px;
    --portals-header-height: 74px;
    --portals-sidebar-width: 250px;
}

/* Reusable accessibility helper. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Reusable keyboard focus treatment for interactive controls. */
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--portals-accent);
    outline-offset: 2px;
}

/* Keep browser- and password-manager-filled values in the site's control style. */
:where(input, textarea):autofill,
:where(input, textarea):-webkit-autofill {
    color: inherit !important;
    background-color: inherit !important;
    caret-color: currentColor;
    -webkit-text-fill-color: currentColor;
    transition: background-color 9999s ease-out 0s, color 9999s ease-out 0s;
}

/* Reusable status colors. */
.portals-status-success {
    background: #dcebdd;
    color: #214c25;
}

.portals-status-danger {
    color: var(--portals-danger);
}