:root {
    --font-caption: 0.75rem;
    --font-meta: 0.8125rem;
    --font-control: 0.875rem;
    --font-body-readable: 0.95rem;
    --font-section-readable: 1.125rem;
    --font-page-readable: clamp(1.75rem, 2vw, 2rem);
}

body {
    font-size: 1rem;
}

.workspace-content :where(input, select, textarea) {
    font-family: inherit;
    font-size: var(--font-control);
    line-height: 1.45;
}

body.light-mode .workspace-content :is(select, input[type="number"]) {
    color: var(--text-primary) !important;
    color-scheme: light;
}

body.light-mode .workspace-content select option {
    background: var(--ui-panel-base);
    color: var(--text-primary);
}

.workspace-content :where(button, .btn) {
    font-family: inherit;
}

.workspace-content :where(button:not(.icon-pill), .btn:not(.icon-pill)) {
    font-size: var(--font-control);
}

.workspace-content small {
    font-size: var(--font-meta);
    line-height: 1.45;
}

.workspace-content :where(table, .dark-table) {
    font-size: var(--font-body-readable);
}

.workspace-content :where(table th, .dark-table th) {
    font-size: var(--font-meta);
    letter-spacing: 0;
}

/* Standard BackOffice pages share this shell, including Setup imports and report filters. */
.page-shell {
    font-size: var(--font-body-readable);
    line-height: 1.55;
}

.workspace-content > :is(.page-shell, .workspace-page) {
    padding: 1.25rem;
}

.workspace-content > .workspace-page {
    font-size: var(--font-body-readable);
    line-height: 1.55;
}

.page-shell h1,
.page-shell .page-title {
    font-size: var(--font-page-readable) !important;
    line-height: 1.2;
    letter-spacing: 0 !important;
}

.workspace-content > :is(.page-shell, .workspace-page) h1 {
    margin: 0 0 0.35rem;
    font-size: var(--font-page-readable) !important;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0 !important;
}

.workspace-content > .workspace-page > header > div:first-child > p {
    margin: 0.2rem 0 0;
    color: var(--text-secondary);
    font-size: var(--font-control) !important;
    line-height: 1.55;
}

.page-shell :where(p, label) {
    font-size: var(--font-control);
    line-height: 1.55;
}

.page-shell :where(input, select, textarea, button:not(.icon-pill), .btn) {
    font-size: var(--font-control);
    line-height: 1.4;
}

.page-shell small {
    font-size: var(--font-meta);
    line-height: 1.45;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) {
    font-size: var(--font-body-readable);
    line-height: 1.55;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) h1 {
    font-size: var(--font-page-readable) !important;
    line-height: 1.2;
    letter-spacing: 0 !important;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) :where(p, label) {
    font-size: var(--font-control) !important;
    line-height: 1.55;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) :where(input, select, textarea) {
    font-size: var(--font-control) !important;
    line-height: 1.45;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) small {
    font-size: var(--font-meta) !important;
    line-height: 1.45;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) :where(button:not(.icon-pill), a:not(.icon-pill)) {
    font-size: var(--font-control) !important;
    line-height: 1.3;
}

:is(
    .establishment-shell,
    .org-shell,
    .property-shell,
    .inventory-page,
    .categories-page,
    .menu-groups-page,
    .items-page,
    .menus-page,
    .prep-page,
    .overrides-page,
    .recipes-page,
    .reservation-settings-shell,
    .setup-overview-shell,
    .stock-locations-page,
    .takeout-page,
    .tax-page,
    .setup-wizard
) :where([class*="badge"], [class*="chip"], [class*="kicker"], [class*="eyebrow"]) {
    font-size: var(--font-caption) !important;
    letter-spacing: 0;
}

/* Organization setup: Staff, Departments, and Devices previously used 8-10px text. */
.org-shell :where(
    .org-header p,
    .org-alert,
    .org-toolbar > div span,
    .org-row p,
    .org-detail,
    .org-panel-error,
    .org-form-section header span,
    .org-context p,
    .access-strip small
) {
    font-size: var(--font-meta) !important;
}

.org-shell :where(
    .org-primary,
    .org-secondary,
    .org-actions a,
    .org-actions button,
    .org-empty a,
    .org-empty button,
    .org-cancel,
    .org-save,
    .org-toolbar input,
    .org-toolbar select,
    .org-fields input,
    .org-fields select
) {
    font-size: var(--font-control) !important;
}

.org-shell :where(
    .org-metrics span,
    .org-stat span,
    .staff-key > span,
    .admin-reference span,
    .admin-key > span,
    .org-fields label > span
) {
    font-size: 0.8rem !important;
    letter-spacing: 0;
}

.org-shell .org-toolbar h2,
.org-shell .org-form-section h4 {
    font-size: var(--font-section-readable) !important;
    letter-spacing: 0;
}

.org-shell .org-identity h2 {
    font-size: 1rem !important;
    letter-spacing: 0;
}

/* Establishment setup */
.establishment-shell :where(
    .establishment-header p,
    .establishment-alert,
    .establishment-section header p,
    .establishment-section header > span,
    .establishment-summary p,
    .channel-row p,
    .establishment-savebar span
) {
    font-size: var(--font-meta) !important;
}

.establishment-shell :where(
    .establishment-primary,
    .establishment-secondary,
    .establishment-fields input,
    .establishment-fields select,
    .establishment-fields textarea,
    .channel-settings input,
    .channel-settings select
) {
    font-size: var(--font-control) !important;
}

.establishment-shell :where(
    .establishment-section h2,
    .establishment-summary h2
) {
    font-size: var(--font-section-readable) !important;
    letter-spacing: 0;
}

.establishment-shell :where(
    .establishment-fields label > span,
    .channel-settings label > span,
    .section-kicker
) {
    font-size: 0.8rem !important;
    letter-spacing: 0;
}

/* Venues, Locations, and Dining Units */
.property-shell :where(
    .property-header p,
    .property-alert,
    .property-toolbar > div span,
    .property-identity p,
    .property-panel-error,
    .property-form-section header span,
    .field-help,
    .unit-toggle-list small
) {
    font-size: var(--font-meta) !important;
}

.property-shell :where(
    .property-primary,
    .property-secondary,
    .property-actions button,
    .property-actions a,
    .property-empty button,
    .property-empty a,
    .property-cancel,
    .property-save,
    .property-toolbar input,
    .property-toolbar select,
    .property-fields input,
    .property-fields select,
    .property-fields textarea
) {
    font-size: var(--font-control) !important;
}

.property-shell :where(
    .property-metrics span,
    .property-detail span,
    .property-fields label > span,
    .venue-list-header
) {
    font-size: 0.8rem !important;
    letter-spacing: 0;
}

.property-shell :where(.property-toolbar h2, .property-form-section h4) {
    font-size: var(--font-section-readable) !important;
    letter-spacing: 0;
}

.property-shell .property-identity h2 {
    font-size: 1rem !important;
    letter-spacing: 0;
}

.property-shell .property-detail strong,
.property-shell .venue-structure strong {
    font-size: var(--font-control) !important;
}

.property-register,
.org-register {
    overflow-x: auto;
}

@media (max-width: 768px) {
    .workspace-content > :is(.page-shell, .workspace-page) {
        padding: 1rem;
    }

    .workspace-content > :is(.page-shell, .workspace-page) h1 {
        font-size: 1.65rem !important;
    }

    .workspace-content > .direct-ordering.workspace-page {
        padding-bottom: 5.25rem;
    }

    :is(
        .establishment-shell,
        .org-shell,
        .property-shell,
        .inventory-page,
        .categories-page,
        .menu-groups-page,
        .items-page,
        .menus-page,
        .prep-page,
        .overrides-page,
        .recipes-page,
        .reservation-settings-shell,
        .setup-overview-shell,
        .stock-locations-page,
        .takeout-page,
        .tax-page,
        .setup-wizard
    ) h1 {
        font-size: 1.65rem !important;
    }

    :where(.org-header, .property-header, .establishment-header) {
        align-items: stretch;
        flex-wrap: wrap;
    }

    :where(.org-header-actions, .property-header-actions, .establishment-header-actions) {
        flex-wrap: wrap;
    }

    :where(.org-actions, .property-actions) {
        row-gap: 0.6rem;
    }
}