:root {
    /* Typography / weight */
    --fw-medium: 700;
    --font-family-ui: Manrope, Roboto, Arial, sans-serif;

    /*
     * Application shell geometry. Every centered workspace surface consumes
     * these tokens so the sidebar never creates a second, competing center.
     */
    --app-content-width: 62.375rem;
    --app-communications-width: 76rem;
    --app-sidebar-compact-width: 3.75rem;
    --app-sidebar-expanded-width: 14rem;
    --app-sidebar-width: 0rem;
    --app-header-primary-height: 3.94rem;
    --app-header-height: var(--app-header-primary-height);
    --app-footer-height: 4.55rem;
    --app-shell-gutter: clamp(0.5rem, 1vw, 1rem);
    /* Shared breathing room for every page-level workspace canvas. Keep this
     * separate from component padding so page density can be tuned once. */
    --app-content-inset: clamp(0.75rem, 1vw, 1rem);
    --app-content-section-gap: 1rem;
    /* Separation between major product domains. This is intentionally larger
     * than the card gap so related cards group together at a glance. */
    --app-content-domain-gap: 1.4rem;
    --app-section-gap: var(--app-content-section-gap);
    --app-content-card-gap: 0.75rem;
    --app-related-content-gap: 0.65rem;
    --app-card-content-inset: 1rem;
    --app-active-rail-width: 24rem;
    --app-active-rail-gap: 0.5rem;
    /* The dashboard's future utility rail mirrors both the Live Calls rail and
     * the persistent navigation rail, keeping the three-panel board on the
     * physical viewport centerline. */
    --app-dashboard-utility-rail-width: calc(var(--app-active-rail-width) + var(--app-sidebar-width));
    --communication-direction-rail-width: 0.375rem;

    /* Foundation */
    --color-bg: #f6f8fb;
    --color-surface: #ffffff;
    --color-surface-muted: #f8fafc;
    --color-surface-elevated: #ffffff;

    --color-text: #1f2937;
    --color-text-muted: #4b5563;
    --color-text-subtle: #6b7280;
    --color-text-inverse: #ffffff;

    --color-border: #d7dee8;
    --color-border-muted: #e8edf3;
    --color-border-strong: #b8c2cf;

    /*
     * Unthemed fallback. Production theme palettes and their base/accent
     * pairs are centralized in _theme_tokens.css.
     */
    --color-brand: #1e90ff;
    --color-brand-hover: #1877d8;
    --color-brand-active: #145fad;
    --color-brand-soft: #eaf4ff;
    --color-brand-text: #ffffff;
    --color-theme-base: var(--color-brand-active);
    --color-theme-base-hover: var(--color-brand-active);
    --color-theme-base-active: var(--color-brand-active);
    --color-theme-base-soft: var(--color-brand-soft);
    --color-theme-base-border: var(--color-feature-calls-border);
    --color-theme-base-text: var(--color-brand-text);
    --color-theme-accent: var(--color-brand);
    --color-theme-accent-hover: var(--color-brand-hover);
    --color-theme-accent-active: var(--color-brand-active);
    --color-theme-accent-soft: var(--color-brand-soft);
    --color-theme-accent-border: var(--color-feature-calls-border);
    --color-theme-accent-text: var(--color-brand-text);
    /* Foreground on pale accent surfaces, distinct from solid-button text. */
    --color-theme-accent-soft-text: var(--color-theme-base);

    /*
     * Framework-neutral semantic aliases. Vue components consume these
     * names now; Tailwind 4 can expose the same values through @theme later.
     */
    --background: var(--color-bg);
    --foreground: var(--color-text);
    --card: var(--color-surface-elevated);
    --card-foreground: var(--color-text);
    --popover: var(--color-surface-elevated);
    --popover-foreground: var(--color-text);
    --primary: var(--color-brand);
    --primary-foreground: var(--color-brand-text);
    --secondary: var(--color-surface-muted);
    --secondary-foreground: var(--color-text);
    --muted: var(--color-surface-muted);
    --muted-foreground: var(--color-text-muted);
    --accent: var(--color-brand-soft);
    --accent-foreground: var(--color-brand-active);
    --destructive: var(--color-danger);
    --destructive-foreground: var(--color-text-inverse);
    --border: var(--color-border-muted);
    --input: var(--color-border);
    --ring: var(--color-brand);
    --radius: 0.625rem;

    /* Floating workspace controls */
    --workspace-popover-gap: 8px;
    --workspace-popover-radius: 0.82rem;
    --workspace-popover-padding: 0.72rem;
    --workspace-popover-background: var(--color-surface-elevated);
    --workspace-popover-border: var(--color-border);
    --workspace-popover-shadow: var(--elevation-popover);
    --workspace-popover-toolbar-gap: 0.42rem;
    --workspace-popover-control-height: 2.55rem;
    --workspace-popover-control-radius: 0.62rem;
    --workspace-popover-section-gap: 0.62rem;
    --workspace-popover-section-padding: 0.72rem;
    --workspace-popover-section-radius: 0.72rem;
    --workspace-popover-section-background: color-mix(in srgb, var(--surface-panel-field-bg) 76%, transparent);
    --ui-type-title: 1rem;
    --ui-type-body: 0.9375rem;
    --ui-type-notice: 1rem;
    --ui-type-control: 0.875rem;
    --ui-type-meta: 0.8125rem;
    --ui-type-badge: 0.8125rem;
    --ui-type-caption: 0.75rem;
    --ui-control-min-height: 2.75rem;
    --communication-deck-action-width: 12.5rem;
    --communication-deck-control-height: 4rem;
    --communication-rail-background: #263548;
    --communication-rail-background-hover: #34465d;
    --communication-rail-text: #f1f5f9;
    --communication-rail-muted: #cbd5e1;
    --communication-rail-accent: #a8c7fa;
    --communication-rail-separator: rgba(226, 232, 240, 0.18);
    --communication-rail-online: #5eead4;
    --communication-rail-warning: #fbbf24;
    --communication-rail-error: #fda4af;
    --communication-activity-direct: #fda4af;
    --communication-activity-queue: #7dd3fc;
    --communication-activity-recent: #cbd5e1;
    --communication-activity-text: #d8b4fe;

    /* Feature accents */
    --color-feature-calls: #145fad;
    --color-feature-calls-soft: #eaf4ff;
    --color-feature-calls-border: #b8d7f2;
    --color-feature-calls-text: #ffffff;

    --color-feature-contacts: #0d4f86;
    --color-feature-contacts-soft: #edf4fa;
    --color-feature-contacts-border: #b3cadc;
    --color-feature-contacts-text: #ffffff;

    --color-feature-texts: #334155;
    --color-feature-texts-soft: #f1f5f9;
    --color-feature-texts-border: #cbd5e1;
    --color-feature-texts-text: #ffffff;

    --color-feature-summary: #0d4f86;
    --color-feature-summary-soft: #edf4fa;
    --color-feature-summary-text: #ffffff;

    --color-feature-settings: #334155;
    --color-feature-settings-soft: #f1f5f9;
    --color-feature-settings-text: #ffffff;

    /* Public marketing roles */
    --color-marketing-primary: var(--color-brand-active);
    --color-marketing-primary-hover: #104f91;
    --color-marketing-primary-active: #0d4f86;
    --color-marketing-primary-soft: var(--color-brand-soft);
    --color-marketing-secondary: var(--color-brand);
    --color-marketing-secondary-soft: var(--color-brand-soft);
    --color-marketing-dark: #0d4f86;

    /* Semantic states */
    --color-info: #0c4b5f;
    --color-info-soft: #cdeefe;
    --color-info-border: #a3defc;
    --color-info-text: #0c4b5f;

    --color-success: #155d46;
    --color-success-soft: #d1f2e2;
    --color-success-border: #a8e3c6;
    --color-success-text: #155d46;

    --color-warning: #5c4600;
    --color-warning-soft: #fff1c2;
    --color-warning-border: #ffe398;
    --color-warning-text: #5c4600;

    --color-danger: #842029;
    --color-danger-soft: #f3d5da;
    --color-danger-border: #e3aeb7;
    --color-danger-text: #842029;

    --color-neutral: #4b5563;
    --color-neutral-soft: #f3f4f6;
    --color-neutral-border: #d1d5db;
    --color-neutral-text: #374151;

    --color-inverse: #4b5563;
    --color-inverse-soft: #6b7280;
    --color-inverse-border: #374151;
    --color-inverse-text: #f9fafb;

    /* Tables */
    --table-header-bg: #eef4ff;
    --table-header-text: #2b436c;
    --table-row-odd: #ffffff;
    --table-row-even: #f8fafc;
    --table-row-hover: #f2f6fb;
    --table-border: var(--color-border);

    /* Buttons */
    --button-bg: #f3f4f6;
    --button-text: #374151;
    --button-border: #d1d5db;
    --button-hover-bg: #e5e7eb;
    --button-hover-text: #111827;
    --button-hover-border: #c4ccd6;

    /* Inputs */
    --input-bg: #ffffff;
    --input-text: var(--color-text);
    --input-placeholder: #9ca3af;
    --input-border: var(--color-border);
    --input-focus-border: var(--color-brand);
    --input-focus-ring: rgba(30, 144, 255, 0.18);

    /* Scrollbars */
    --scrollbar-size: 10px;
    --scrollbar-track: transparent;
    --scrollbar-thumb: rgba(51, 65, 85, 0.26);
    --scrollbar-thumb-hover: rgba(51, 65, 85, 0.38);
    --scrollbar-thumb-active: rgba(51, 65, 85, 0.48);

    /* Unique / specialty */
    --color-volume-base: #9d174d;
    --color-volume-fill: #d977a9;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 6px 18px rgba(16, 24, 40, 0.10);
    --shadow-lg: 0 14px 34px rgba(16, 24, 40, 0.16);
    --shadow-bottom-lg: 0 -10px 26px rgba(16, 24, 40, 0.18);

    /* Interactive surfaces */
    --shadow-card: 0 1px 2px rgba(15, 23, 42, 0.05), 0 8px 22px rgba(15, 23, 42, 0.07);
    --shadow-card-hover: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px rgba(15, 23, 42, 0.10);
    --elevation-content: var(--shadow-card);
    --elevation-content-hover: var(--shadow-card-hover);
    --elevation-floating-control: var(--shadow-md);
    --elevation-popover: var(--shadow-panel);
    --elevation-drawer: var(--shadow-modal);
    --elevation-sticky-header: 0 8px 20px color-mix(in srgb, var(--color-theme-base) 12%, transparent);
    --elevation-sticky-footer: 0 -10px 26px color-mix(in srgb, var(--color-theme-base) 12%, transparent);
    --motion-card-lift: translateY(-1px);
    --motion-card-transition: border-color 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease, transform 0.16s ease;
    --motion-card-sheen: linear-gradient(120deg, transparent 8%, rgba(255, 255, 255, 0.34) 42%, transparent 72%);

    --surface-panel-border: rgba(146, 174, 214, 0.26);
    --surface-panel-bg:
        radial-gradient(circle at 8% -12%, rgba(216, 232, 255, 0.72), transparent 44%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.99) 0%, rgba(248, 250, 252, 0.99) 100%);
    --surface-panel-field-bg: rgba(255, 255, 255, 0.58);
    --surface-panel-control-bg: rgba(255, 255, 255, 0.92);
    --surface-panel-soft-control-bg: rgba(255, 255, 255, 0.76);
    --shadow-panel: 0 14px 34px rgba(16, 24, 40, 0.18);
    --shadow-modal: 0 18px 46px rgba(15, 23, 42, 0.24);

    /* Layering contract: content < chrome < primary drawer < modal < toast. */
    --z-app-chrome: 900;
    --z-primary-drawer: 1240;
    --z-modal: 1260;
    --z-toast: 1400;
    --ui-drawer-edge-radius: 0.9rem;

    /* Live call states */
    --color-call-active: #0f766e;
    --color-call-active-soft: #e6fffb;
    --color-call-active-border: #99f6e4;
    --shadow-call-active: rgba(15, 118, 110, 0.30);

    --color-call-ringing: #d97706;
    --color-call-ringing-soft: #fff7ed;
    --color-call-ringing-border: #fdba74;
    --shadow-call-ringing: rgba(217, 119, 6, 0.34);

    /* Overlay */
    --overlay-backdrop: rgba(15, 23, 42, 0.42);

}

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    clip-path: inset(50%) !important;
    border: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
}

@media (min-width: 1180px) {
    :root {
        --app-sidebar-width: var(--app-sidebar-compact-width);
    }
}

/* Let the Dashboard's auxiliary rail compress independently on reduced
 * panoramic displays. Primary navigation follows the content-width threshold. */
@media (min-width: 1900px) and (max-width: 2299px) {
    :root {
        --app-active-rail-width: clamp(22rem, 18vw, 24rem);
    }
}

/* 62.375rem content + a 14rem navigation rail and balanced outer insets. */
@media (min-width: 1480px) {
    :root {
        --app-sidebar-width: var(--app-sidebar-expanded-width);
    }
}