/* ============================================================
   Apovital design tokens — green/peach skin (Ali's "Min kassa – grön",
   2026-09-03). Token NAMES are kept identical to the Provitalia twin
   (espresso/bone/clay/sage) so my-pages.css stays byte-shared; only
   the VALUES differ: ink greys for text, green for action/success,
   peach as the accent, cream ground.
   Provitalia origin of the recipe:
   Canonical source: bevis/mina-sidor-redesign-2026-08-31/
   mypages-prototyp.html (approved design), extracted verbatim to
   the :root recipe below. Bone/clay/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: 'Hanken Grotesk', 'Jost', system-ui, sans-serif;
    --font-text: 'Hanken Grotesk', 'Karla', system-ui, sans-serif;
    --font-body: var(--font-text);
    --bone-50: #FCF9F3;
    --bone-100: #FAF6EF;
    --bone-200: #F1EDE4;
    --bone-300: #E8E6E1;
    --bone-400: #DCD9D2;
    --clay-300: #C9C5BC;
    --clay-400: #AAB3AD;
    --clay-500: #8A8A92;
    --espresso-500: #5A6A60;
    --espresso-600: #2E2E38;
    --espresso-700: #26262F;
    --espresso-800: #17171E;
    --espresso-900: #235A41;
    --espresso-950: #163A29;
    --white: #FFFFFF;
    --sage-400: #6FAE8C;
    --sage-500: #4F8C6E;
    --sage-600: #2E6B4F;
    --konjak: #A8632F;
    --peach: #F7B287;
    --paper: #ECF5EF;
    --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(--clay-500);
    --text-on-inverse: var(--bone-50);
    --text-on-inverse-muted: rgba(250, 247, 242, 0.68);
    --border-hairline: rgba(23, 23, 30, 0.10);
    --border-default: rgba(23, 23, 30, 0.18);
    --border-strong: rgba(23, 23, 30, 0.28);
    --feedback-success: var(--sage-600);
    --feedback-success-surface: #ECF5EF;
    --feedback-warning: #84662E;
    --feedback-warning-surface: #EFE4CE;
    --feedback-danger: #854A35;
    --feedback-danger-surface: #EDDFD7;
    --feedback-info: var(--espresso-600);
    --feedback-info-surface: var(--bone-300);
    --radius-card: 20px;
    --radius-control: 14px;
    --radius-media: 24px;
    --radius-button: 999px;
    --shadow-xs: 0 1px 2px rgba(46, 107, 79, .05);
    --shadow-sm: 0 2px 10px rgba(46, 107, 79, .06), inset 0 1px 0 rgba(255, 255, 255, .9);
    --shadow-md: 0 14px 44px rgba(20, 20, 40, .13), inset 0 1px 0 rgba(255, 255, 255, .92);
    --shadow-focus: 0 0 0 3px rgba(46, 107, 79, .30);
    --action: #2E6B4F;
    --action-text: var(--bone-50);
    --gradient-espresso-sm: linear-gradient(135deg, #235A41 0%, #2E6B4F 55%, #3E8E68 100%);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --focus: var(--sage-500);
}

/* --- 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: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}