/* ============================================================
   Provitalia design tokens — designsystem Version 1 (14 September 2026)
   Palette and type follow the user-approved designsystem.html.
   Existing portal structure and semantic status tones are retained.
   Bone/copper/espresso/sage warm palette —
   no indigo, no left-rail status bars, no dot separators (the
   delivery timeline event dots are the one drawn exception, see
   my-pages.css).
   Scope: only the portal's own roots. The surrounding store
   theme (Poppins/teal) is intentionally untouched.
   ============================================================ */

/* --- Self-hosted Jost (SIL OFL 1.1 — see ../fonts/jost/OFL.txt).
       Display face for headings; body stays Karla. Variable font,
       wght 300-700, roman + italic, latin + latin-ext. --- */
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/jost/jost-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost/jost-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jost/jost-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Self-hosted Karla (SIL OFL 1.1 — see ../fonts/karla/OFL.txt).
       Body face. Variable font, wght 300-700, roman + italic,
       latin + latin-ext. --- */
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/karla/karla-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Karla';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/karla/karla-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla/karla-italic-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Karla';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/karla/karla-italic-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- Tokens. Defined on every portal root that renders outside
       the .pvmp-my-pages container as well (logout link and the
       support banner sit above it in the DOM), and on the shell
       body class so the page-shell layer (shell.css) inherits
       them for the theme-owned heading it styles. --- */
.pvmp-shell,
.pvmp-my-pages,
.pvmp-login,
.pvmp-logout-link,
.pvmp-support-banner {
    --font-display: 'Jost', 'Futura', 'Avenir Next', system-ui, sans-serif;
    --font-text: 'Karla', 'Helvetica Neue', system-ui, sans-serif;
    --font-body: var(--font-text);
    --bone-50: #F7F5F1;
    --bone-100: #F7F5F1;
    --bone-200: #EEE9E1;
    --bone-300: #E4DCD3;
    --bone-400: #D7CABD;
    --clay-300: #C4B5A6;
    --clay-400: #9C8F82;
    --clay-500: #7A5A47;
    --espresso-500: #7A5A47;
    --espresso-600: #4A2C1E;
    --espresso-700: #4A2C1E;
    --espresso-800: #2B1A12;
    --espresso-900: #2B1A12;
    --espresso-950: #24150E;
    --white: #FFFFFF;
    --sage-400: #8F957B;
    --sage-500: #6F765C;
    --sage-600: #575C48;
    --konjak: #B0673A;
    --paper: #EEE9E1;
    --surface-page: var(--bone-100);
    --surface-card: var(--white);
    --text-heading: var(--espresso-800);
    --text-body: var(--espresso-600);
    --text-muted: var(--espresso-500);
    --text-subtle: var(--text-muted);
    --text-on-inverse: var(--bone-50);
    --text-on-inverse-muted: rgba(250, 247, 242, 0.68);
    --border-hairline: #E4DCD3;
    --border-default: #9C8F82;
    --border-strong: #7A5A47;
    --feedback-success: var(--sage-600);
    --feedback-success-surface: #E5E7DB;
    --feedback-warning: #84662E;
    --feedback-warning-surface: #EFE4CE;
    --feedback-danger: #A63A2B;
    --feedback-danger-surface: #F5E9E5;
    --feedback-info: var(--espresso-600);
    --feedback-info-surface: var(--bone-300);
    --radius-card: 12px;
    --radius-control: 8px;
    --radius-media: 12px;
    --radius-button: 999px;
    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: 0 10px 32px -20px rgba(43, 26, 18, .22);
    --shadow-focus: 0 0 0 3px rgba(176, 103, 58, .24);
    --action: var(--espresso-900);
    --action-text: var(--bone-50);
    --gradient-espresso-sm: linear-gradient(180deg, #4A2C1E, #2B1A12);
    --ease-spring: ease-out; /* compatibility alias, no overshoot */
    --focus: #B0673A;
}

/* --- Base application: the portal container adopts the espresso
       ground and body face; the login page keeps its own layout
       (bankid.css) until its dedicated package restyles it. --- */
.pvmp-my-pages {
    font-family: var(--font-text);
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-body);
}

.pvmp-my-pages h1,
.pvmp-my-pages h2,
.pvmp-my-pages h3,
.pvmp-my-pages h4 {
    font-family: var(--font-display);
    color: var(--text-heading);
}

/* Explicit heading scale at zero extra specificity (:where), so any
   view class that sets its own size still wins via load order. The
   theme's preflight strips UA heading sizes, so these must exist. */
.pvmp-my-pages :where(h1) {
    font-size: 30px;
    line-height: 1.1;
    font-weight: 300;
    letter-spacing: -0.02em;
}

.pvmp-my-pages :where(h2) {
    font-size: 21px;
    line-height: 1.2;
    font-weight: 450;
    letter-spacing: -0.01em;
}

.pvmp-my-pages :where(h3) {
    font-size: 18px;
    line-height: 1.25;
    font-weight: 450;
    letter-spacing: -0.01em;
}

.pvmp-my-pages :where(h4) {
    font-size: 16px;
    line-height: 1.3;
    font-weight: 450;
}

/* --- Accessibility floor: focus ring on every interactive
       element inside the portal surfaces. --- */
.pvmp-my-pages :focus-visible,
.pvmp-login :focus-visible,
.pvmp-logout-link:focus-visible,
.pvmp-support-banner :focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .pvmp-my-pages,
    .pvmp-my-pages *,
    .pvmp-my-pages *::before,
    .pvmp-my-pages *::after,
    .pvmp-login,
    .pvmp-login *,
    .pvmp-login *::before,
    .pvmp-login *::after,
    .pvmp-logout-link,
    .pvmp-support-banner,
    .pvmp-support-banner * {
        animation-duration: 0ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0ms !important;
        scroll-behavior: auto !important;
    }
}

/* Type roles and line endings apply only inside the patient portal. */
.pvmp-my-pages :where(h1,h2,h3,h4),
.pvmp-login-page :where(h1,h2,h3) { text-wrap: balance; }
.pvmp-my-pages :where(p,span,button,a,label,legend),
.pvmp-login-page :where(p,span,button,a,label) { text-wrap: pretty; }
.pvmp-my-pages :where(button,input,select,textarea,label,legend),
.pvmp-login-page :where(button,input,select,textarea,label) { font-family: var(--font-text); }
.pvmp-my-pages *, .pvmp-my-pages *::before, .pvmp-my-pages *::after { box-sizing: border-box; }
.pvmp-my-pages :where(p,h1,h2,h3,h4,fieldset) { min-width: 0; }