:root {
    --bf-header-height: 48px;

    /* Text/icon tones that shared Bff.Shared.Client components reach for by token name.
       Each portal declares its own value; these are Customer Portal's slate neutrals,
       matching the rest of its palette. */
    --text-muted: #64748b;
    --icon-muted: #cbd5e1;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --border: #e2e8f0;
    --card: #ffffff;

    /* Status tones in the same shape mBark's design system declares: the base tone, the solid
       `-subtle` fill a chip or a cell band takes, and the foreground that fill is paired with.
       The shared grid's colour-rule formats read these names, so both portals paint from their
       own palette through one rule. Slate, emerald, amber, red and sky, matching the rest of the
       portal's palette. */
    --neutral: #64748b;
    --neutral-subtle: #e2e8f0;
    --success: #059669;
    --success-subtle: #ecfdf5;
    --success-border: color-mix(in oklab, var(--success) 25%, transparent);
    --warning: #d97706;
    --warning-subtle: #fffbeb;
    --error: #dc2626;
    --error-subtle: #fef2f2;
    --info: #0284c7;
    --info-subtle: #f0f9ff;

    /* Foreground pairings. A subtle tint always takes --text-primary. */
    --on-neutral-subtle: var(--text-primary);
    --on-success-subtle: var(--text-primary);
    --on-warning-subtle: var(--text-primary);
    --on-error-subtle: var(--text-primary);
    --on-info-subtle: var(--text-primary);

    /* The one raised-surface shadow a shared component reaches for by token name. */
    --elevation-raised: 0 10px 24px -4px oklch(0.208 0.042 266 / 0.14), 0 4px 8px -4px oklch(0.208 0.042 266 / 0.08);

    /* Shared components use rounded-base. Tailwind's scale in this portal has sm, md and lg but
       no base step, so the token is declared here. */
    --radius-base: 6px;
}

html {
    min-width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    flex-grow: 1;
    margin: 0;
    display: flex;
    flex-direction: column;
}