@font-face {
    font-family: "Avenir Next Pro";
    src: url("../mf-font-AvenirNextLTPro-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next Pro";
    src: url("../mf-font-AvenirNextLTPro-Medium.otf") format("opentype");
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next Pro";
    src: url("../mf-font-AvenirNextLTPro-Demi.otf") format("opentype");
    font-style: normal;
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next Pro";
    src: url("../mf-font-AvenirNextLTPro-Bold.otf") format("opentype");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: "Avenir Next Pro";
    src: url("../mf-font-AvenirNextLTPro-Heavy.otf") format("opentype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

/*
 * Mezzoforte — canonical visual tokens
 * Scope: Mezzoforte UX/UI 2..0 foundations, authenticated Cloud, Admin and login.
 * Public marketing and PWA keep their independent layout contracts.
 */
:root {
    --mf-font-ui: "Avenir Next Pro", "Avenir Next", system-ui, sans-serif;
    --mf-weight-regular: 400;
    --mf-weight-medium: 500;
    --mf-weight-demi: 600;
    --mf-weight-bold: 700;

    --mf-dark-canvas: #101010;
    --mf-dark-sidebar: #121212;
    --mf-dark-surface-1: #1C1C1C;
    --mf-dark-surface-2: #252422;
    --mf-dark-surface-3: #2B2A27;
    --mf-dark-text-1: #F5F5F0;
    --mf-dark-text-2: #BDB8AF;
    --mf-dark-text-3: #8F8A82;
    --mf-dark-border-1: #34322E;
    --mf-dark-border-2: #47443E;

    --mf-light-canvas: #F5F5F0;
    --mf-light-sidebar: #ECE8DE;
    --mf-light-surface-1: #FAF9F5;
    --mf-light-surface-2: #E4E0D7;
    --mf-light-surface-3: #FFFFFF;
    --mf-light-text-1: #121212;
    --mf-light-text-2: #66615A;
    --mf-light-text-3: #8B857D;
    --mf-light-border-1: #CFC9BE;
    --mf-light-border-2: #B7B0A4;

    --mf-accent-dark: #A68B5B;
    --mf-accent-dark-rgb: 166, 139, 91;
    --mf-accent-light: #80663E;
    --mf-accent-light-rgb: 128, 102, 62;
    --mf-accent-champagne: var(--mf-accent-dark);
    --mf-accent-champagne-rgb: var(--mf-accent-dark-rgb);
    --mf-accent-plum: var(--mf-accent-dark);
    --mf-accent-plum-rgb: var(--mf-accent-dark-rgb);
    --mf-accent-sage: var(--mf-dark-text-2);
    --mf-accent-sage-rgb: 189, 184, 175;

    /* Accessible primary-action pair: identical contract in dark and light. */
    --mf-action-primary-bg: var(--mf-accent-light);
    --mf-action-primary-bg-hover: color-mix(in srgb, var(--mf-action-primary-bg) 88%, var(--mf-dark-canvas));
    --mf-action-primary-bg-active: color-mix(in srgb, var(--mf-action-primary-bg) 80%, var(--mf-dark-canvas));
    --mf-action-primary-text: var(--mf-dark-text-1);

    --mf-space-1: 4px;
    --mf-space-2: 8px;
    --mf-space-3: 12px;
    --mf-space-4: 16px;
    --mf-space-5: 20px;
    --mf-space-6: 24px;
    --mf-space-8: 32px;

    --mf-radius-xs: 4px;
    --mf-radius-sm: 6px;
    --mf-radius-md: 8px;
    --mf-radius-lg: 12px;
    --mf-radius-round: 999px;

    --mf-control-compact: 32px;
    --mf-control-default: 32px;
    --mf-field-compact: 30px;
    --mf-control-touch: 44px;
    --mf-sidebar-expanded: 240px;
    --mf-sidebar-collapsed: 56px;
    --mf-side-panel-width: 520px;

    --mf-avatar-fallback-bg: color-mix(in srgb, var(--mf-text-1) 9%, var(--mf-surface-1));
    --mf-avatar-fallback-text: var(--mf-text-1);

    --mf-type-caption: 0.68rem;
    --mf-type-small: 0.75rem;
    --mf-type-body: 0.84rem;
    --mf-type-body-lg: 0.94rem;
    --mf-type-title-sm: 1.05rem;
    --mf-type-title: 1.35rem;
    --mf-type-title-lg: 1.62rem;

    --mf-ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --mf-ease-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
    --mf-motion-fast: 140ms;
    --mf-motion-standard: 180ms;
    --mf-motion-slow: 240ms;

    --mf-z-dropdown: 240;
    --mf-z-panel-backdrop: 480;
    --mf-z-panel: 490;
    --mf-z-modal: 520;
}

body.body--private-refresh,
body.body--admin-refresh,
body.body--auth-refresh,
body.body--god-login,
body.body--initial-billing {
    --mf-color-canvas: var(--mf-dark-canvas);
    --mf-color-sidebar: var(--mf-dark-sidebar);
    --mf-surface-1: var(--mf-dark-surface-1);
    --mf-surface-2: var(--mf-dark-surface-2);
    --mf-surface-3: var(--mf-dark-surface-3);
    --mf-text-1: var(--mf-dark-text-1);
    --mf-text-2: var(--mf-dark-text-2);
    --mf-text-3: var(--mf-dark-text-3);
    --mf-border-1: var(--mf-dark-border-1);
    --mf-border-2: var(--mf-dark-border-2);
    --mf-accent-primary: var(--mf-accent-dark);
    --mf-accent-primary-rgb: var(--mf-accent-dark-rgb);
    --mf-accent-secondary: var(--mf-accent-dark);
    --mf-accent-tertiary: var(--mf-dark-text-2);
    --mf-nav-selected: var(--mf-surface-3);
    --mf-focus-ring: 0 0 0 3px rgba(var(--mf-accent-dark-rgb), 0.2);
    --mf-elevation-1: 0 1px 0 rgba(255, 255, 255, 0.02);
    --mf-elevation-overlay: -12px 0 32px rgba(0, 0, 0, 0.28);
    --mf-elevation-popover: 0 10px 24px rgba(0, 0, 0, 0.22);
    --mf-success: #8F9E86;
    --mf-success-soft: rgba(143, 158, 134, 0.14);
    --mf-warning: #B99A65;
    --mf-warning-soft: rgba(var(--mf-accent-dark-rgb), 0.14);
    --mf-danger: #C57C73;
    --mf-danger-soft: rgba(197, 124, 115, 0.14);
    --mf-info: var(--mf-dark-text-2);
    --mf-info-soft: rgba(189, 184, 175, 0.1);

    --color-bg-primary: var(--mf-color-canvas);
    --color-bg-surface: var(--mf-surface-1);
    --color-bg-elevated: var(--mf-surface-2);
    --color-bg-sidebar: var(--mf-color-sidebar);
    --color-bg-sidebar-soft: var(--mf-surface-2);
    --color-text-primary: var(--mf-text-1);
    --color-text-secondary: var(--mf-text-2);
    --color-text-tertiary: var(--mf-text-3);
    --color-border-subtle: var(--mf-border-1);
    --color-border-strong: var(--mf-border-2);
    --color-accent: var(--mf-accent-primary);
    --color-accent-strong: var(--mf-accent-primary);
    --color-accent-soft: rgba(var(--mf-accent-primary-rgb), 0.12);
    --accent: var(--mf-accent-primary);
    --accent-strong: var(--mf-accent-primary);
    --accent-rgb: var(--mf-accent-primary-rgb);
    --accent-soft: rgba(var(--mf-accent-primary-rgb), 0.12);
    --accent-violet: var(--mf-accent-secondary);
    --accent-violet-soft: rgba(var(--mf-accent-plum-rgb), 0.12);
    --bg: var(--mf-color-canvas);
    --bg-deep: var(--mf-color-canvas);
    --bg-primary: var(--mf-color-canvas);
    --bg-surface: var(--mf-surface-1);
    --bg-elevated: var(--mf-surface-2);
    --bg-sidebar: var(--mf-color-sidebar);
    --bg-sidebar-soft: var(--mf-surface-2);
    --surface: var(--mf-surface-2);
    --surface-alt: var(--mf-surface-1);
    --surface-mid: var(--mf-color-sidebar);
    --surface-primary: var(--mf-color-canvas);
    --surface-secondary: var(--mf-surface-1);
    --surface-elevated: var(--mf-surface-2);
    --surface-sidebar: var(--mf-color-sidebar);
    --surface-sidebar-soft: var(--mf-surface-2);
    --surface-veil: rgba(11, 11, 12, 0.88);
    --text: var(--mf-text-1);
    --text-primary: var(--mf-text-1);
    --text-secondary: var(--mf-text-2);
    --text-tertiary: var(--mf-text-3);
    --muted: var(--mf-text-2);
    --muted-soft: var(--mf-text-3);
    --line: var(--mf-border-1);
    --line-strong: var(--mf-border-2);
    --border-subtle: var(--mf-border-1);
    --border-strong: var(--mf-border-2);
    --input-bg: var(--mf-surface-2);
    --input-bg-hover: var(--mf-surface-3);
    --input-bg-focus: var(--mf-surface-3);
    --input-bg-readonly: var(--mf-surface-1);
    --input-border: var(--mf-border-2);
    --input-border-hover: rgba(var(--mf-accent-primary-rgb), 0.42);
    --input-border-focus: var(--mf-accent-primary);
    --input-focus-ring: var(--mf-focus-ring);
    --success: var(--mf-success);
    --success-soft: var(--mf-success-soft);
    --warning: var(--mf-warning);
    --warning-soft: var(--mf-warning-soft);
    --danger: var(--mf-danger);
    --danger-soft: var(--mf-danger-soft);
    --info: var(--mf-info);
    --info-soft: var(--mf-info-soft);
    --radius-sm: var(--mf-radius-sm);
    --radius-md: var(--mf-radius-md);
    --radius-lg: var(--mf-radius-lg);
    --radius-xl: var(--mf-radius-lg);
    --shadow-soft: var(--mf-elevation-1);
    --shadow-card: var(--mf-elevation-1);
    --transition: var(--mf-motion-standard) var(--mf-ease-standard);
    font-family: var(--mf-font-ui);
    font-weight: var(--mf-weight-regular);
    color: var(--mf-text-1);
}

html[data-theme="light"] body.body--private-refresh,
html[data-theme="light"] body.body--admin-refresh,
html[data-theme="light"] body.body--auth-refresh,
html[data-theme="light"] body.body--god-login,
html[data-theme="light"] body.body--initial-billing {
    --mf-color-canvas: var(--mf-light-canvas);
    --mf-color-sidebar: var(--mf-light-sidebar);
    --mf-surface-1: var(--mf-light-surface-1);
    --mf-surface-2: var(--mf-light-surface-2);
    --mf-surface-3: var(--mf-light-surface-3);
    --mf-text-1: var(--mf-light-text-1);
    --mf-text-2: var(--mf-light-text-2);
    --mf-text-3: var(--mf-light-text-3);
    --mf-border-1: var(--mf-light-border-1);
    --mf-border-2: var(--mf-light-border-2);
    --mf-accent-primary: var(--mf-accent-light);
    --mf-accent-primary-rgb: var(--mf-accent-light-rgb);
    --mf-accent-secondary: var(--mf-accent-light);
    --mf-accent-tertiary: var(--mf-light-text-2);
    --mf-nav-selected: var(--mf-light-surface-2);
    --mf-focus-ring: 0 0 0 3px rgba(var(--mf-accent-light-rgb), 0.2);
    --mf-elevation-1: 0 1px 2px rgba(32, 26, 22, 0.025);
    --mf-elevation-overlay: -12px 0 32px rgba(32, 26, 22, 0.14);
    --mf-elevation-popover: 0 10px 24px rgba(32, 26, 22, 0.12);
    --mf-success: #587364;
    --mf-warning: #956D39;
    --mf-danger: #A6544F;
    --mf-info: #69645F;
    --surface-veil: rgba(248, 246, 242, 0.92);
}

body.body--private-refresh :focus-visible,
body.body--admin-refresh :focus-visible,
body.body--auth-refresh :focus-visible,
body.body--god-login :focus-visible {
    outline-color: var(--mf-accent-primary);
}

/* Exact approved lockup: mf | separator | mezzoforte. */
.mf-brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    color: var(--mf-text-1, #F5F5F0);
    text-decoration: none;
}

.mf-brand-lockup__mark,
.mf-brand-lockup__wordmark {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.mf-brand-lockup__mark {
    width: 31px;
    height: 31px;
}

.mf-brand-lockup__wordmark {
    width: 116px;
    height: 24px;
}

.mf-brand-lockup__asset {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.mf-brand-lockup__asset--light {
    display: none;
}

.mf-brand-lockup__separator {
    width: 1px;
    height: 29px;
    flex: 0 0 1px;
    background: currentColor;
    opacity: 0.62;
}

html[data-theme="light"] .mf-brand-lockup--themed .mf-brand-lockup__asset--dark {
    display: none;
}

html[data-theme="light"] .mf-brand-lockup--themed .mf-brand-lockup__asset--light {
    display: block;
}

.mf-brand-lockup--static-dark {
    color: #F5F5F0;
}

.mf-brand-lockup--static-light {
    color: #121212;
}

.mf-brand-lockup--static-light .mf-brand-lockup__asset--dark {
    display: none;
}

.mf-brand-lockup--static-light .mf-brand-lockup__asset--light {
    display: block;
}

.mf-brand-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
}

.mf-brand-icon__asset {
    grid-area: 1 / 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.mf-brand-icon__asset--light {
    display: none;
}

html[data-theme="light"] .mf-brand-icon--themed .mf-brand-icon__asset--dark {
    display: none;
}

html[data-theme="light"] .mf-brand-icon--themed .mf-brand-icon__asset--light {
    display: block;
}

@media (prefers-reduced-motion: reduce) {
    body.body--private-refresh *,
    body.body--private-refresh *::before,
    body.body--private-refresh *::after,
    body.body--admin-refresh *,
    body.body--admin-refresh *::before,
    body.body--admin-refresh *::after,
    body.body--auth-refresh *,
    body.body--auth-refresh *::before,
    body.body--auth-refresh *::after,
    body.body--god-login *,
    body.body--god-login *::before,
    body.body--god-login *::after,
    body.body--initial-billing *,
    body.body--initial-billing *::before,
    body.body--initial-billing *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
    }
}