:root {
    /*
     * Shared visual contract sourced from docs/Design_Prototypes/Brand Guidelines.html.
     * Future design-heavy slices should depend on these tokens instead of copying
     * one-off values page by page. Shared shell rules preserve role-aware
     * workspace boundaries; they do not force every workflow into the same layout.
     */

    --font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-display: "Inter Tight", "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;

    --text-xs: 0.6875rem;
    --text-sm: 0.75rem;
    --text-base: 0.875rem;
    --text-md: 0.9375rem;
    --text-lg: 1rem;
    --leading-tight: 1.1;
    --leading-normal: 1.45;
    --leading-relaxed: 1.55;
    --tracking-tight: -0.02em;
    --tracking-wide: 0.08em;

    --brand-teal: #006265;
    --brand-teal-deep: #003d40;
    --brand-navy: #003250;
    --brand-lime: #a5ce4d;
    --brand-slate: #5b6770;
    --brand-dust: #6a91a3;
    --brand-paper: #f7f7f4;
    --brand-surface: #ffffff;
    --brand-surface-2: #fafaf8;
    --brand-surface-3: #f0efea;
    --brand-ink: #0b1420;
    --brand-ink-2: #2b3847;
    --brand-muted-2: #8a96a1;
    --brand-border: rgba(11, 20, 32, 0.08);
    --brand-border-strong: rgba(11, 20, 32, 0.14);

    --shadow-sm: 0 1px 0 rgba(11, 20, 32, 0.04);
    --shadow-md: 0 1px 2px rgba(11, 20, 32, 0.06), 0 0 0 1px rgba(11, 20, 32, 0.04);
    --shadow-lg: 0 8px 24px -8px rgba(11, 20, 32, 0.12), 0 1px 2px rgba(11, 20, 32, 0.06);

    --pos: #0a7d4f;
    --pos-soft: #e6f3ed;
    --neg: #b02a37;
    --neg-soft: #fbe9eb;
    --warn: #b46a00;
    --warn-soft: #fcf1df;
    --info: #1f5f8a;
    --info-soft: #e4eff6;

    --radius: 0.625rem;
    --radius-lg: 0.875rem;
    --sidebar-w: 15rem;
    --topbar-h: 4rem;
    --pad-card: 1.25rem;
    --gap: 1rem;

    --accent: var(--brand-teal);
    --accent-foreground: #ffffff;
    --accent-soft: color-mix(in srgb, var(--accent) 12%, white);
    --accent-softer: color-mix(in srgb, var(--accent) 6%, white);
    --accent-outline: color-mix(in srgb, var(--accent) 26%, var(--brand-border));

    --background: var(--brand-paper);
    --foreground: var(--brand-ink);
    --card: var(--brand-surface);
    --card-foreground: var(--brand-ink);
    --popover: var(--brand-surface);
    --popover-foreground: var(--brand-ink);
    --primary: var(--brand-teal);
    --primary-foreground: #ffffff;
    --secondary: var(--brand-ink);
    --secondary-foreground: #ffffff;
    --muted: var(--brand-surface-2);
    --muted-foreground: var(--brand-slate);
    --destructive: var(--neg);
    --destructive-foreground: #ffffff;
    --border: var(--brand-border);
    --input: var(--brand-border-strong);
    --ring: color-mix(in srgb, var(--brand-teal) 72%, white);

    --chart-1: var(--pos);
    --chart-2: var(--brand-teal);
    --chart-3: color-mix(in srgb, var(--brand-dust) 70%, var(--brand-teal));
    --chart-4: var(--warn);
    --chart-5: var(--brand-lime);

    --sidebar-background: var(--brand-navy);
    --sidebar-foreground: #ffffff;
    --sidebar-primary: #ffffff;
    --sidebar-primary-foreground: var(--brand-navy);
    --sidebar-accent: color-mix(in srgb, var(--brand-dust) 74%, var(--brand-navy));
    --sidebar-accent-foreground: #ffffff;
    --sidebar-border: rgba(255, 255, 255, 0.14);
    --sidebar-ring: color-mix(in srgb, var(--brand-lime) 28%, var(--brand-teal));

    --shell-canvas: var(--brand-paper);
    --shell-nav-surface: linear-gradient(
        180deg,
        color-mix(in srgb, var(--brand-teal-deep) 88%, var(--brand-navy)) 0%,
        var(--brand-navy) 54%,
        color-mix(in srgb, var(--brand-navy) 84%, var(--brand-teal-deep)) 100%);
    --shell-nav-foreground: #ffffff;
    --shell-nav-muted: rgba(255, 255, 255, 0.72);
    --shell-nav-border: rgba(255, 255, 255, 0.14);
    --shell-nav-active-fill: color-mix(in srgb, var(--brand-dust) 72%, var(--brand-navy));
    --shell-nav-active-foreground: #ffffff;
    --shell-topbar-surface: color-mix(in srgb, var(--brand-paper) 90%, white);
    --shell-topbar-border: var(--brand-border);
    --shell-topbar-copy: var(--brand-slate);
    --shell-command-surface: var(--brand-surface);
    --shell-command-border: var(--brand-border-strong);
    --shell-command-hover: var(--brand-surface-2);
    --shell-panel-surface: var(--brand-surface);
    --shell-panel-muted: var(--brand-surface-2);
    --shell-panel-subtle: var(--brand-surface-3);
    --shell-sales-board: color-mix(in srgb, var(--brand-paper) 84%, var(--brand-surface-2));

    --status-error-bg: var(--neg-soft);
    --status-error-border: color-mix(in srgb, var(--neg) 24%, white);
    --status-error-fg: var(--neg);
    --status-success-bg: var(--pos-soft);
    --status-success-border: color-mix(in srgb, var(--pos) 24%, white);
    --status-success-fg: var(--pos);
    --status-warning-bg: var(--warn-soft);
    --status-warning-border: color-mix(in srgb, var(--warn) 24%, white);
    --status-warning-fg: var(--warn);

    --priority-high: var(--neg);
    --priority-medium: var(--warn);
    --priority-low: var(--brand-muted-2);

    --mix-lighten: white;
    --mix-darken: black;

    color-scheme: light;
}

.dark {
    --brand-paper: #08111b;
    --brand-surface: #0f1823;
    --brand-surface-2: #13202d;
    --brand-surface-3: #1a2836;
    --brand-ink: #f3f7fb;
    --brand-ink-2: #dae5ef;
    --brand-slate: #99a9b7;
    --brand-muted-2: #6f8192;
    --brand-border: rgba(222, 234, 244, 0.12);
    --brand-border-strong: rgba(222, 234, 244, 0.18);

    --background: var(--brand-paper);
    --foreground: var(--brand-ink);
    --card: var(--brand-surface);
    --card-foreground: var(--brand-ink);
    --popover: var(--brand-surface);
    --popover-foreground: var(--brand-ink);
    --secondary: #dbe7f2;
    --secondary-foreground: #08111b;
    --muted: var(--brand-surface-2);
    --muted-foreground: var(--brand-slate);
    --border: var(--brand-border);
    --input: var(--brand-border-strong);
    --ring: color-mix(in srgb, var(--brand-teal) 60%, white);

    --shell-canvas: radial-gradient(circle at top right, rgba(165, 206, 77, 0.08), transparent 26%), var(--brand-paper);
    --shell-topbar-surface: color-mix(in srgb, var(--brand-paper) 86%, black);
    --shell-command-surface: color-mix(in srgb, var(--brand-surface) 94%, black);
    --shell-command-hover: color-mix(in srgb, var(--brand-surface-2) 96%, black);
    --shell-sales-board: color-mix(in srgb, var(--brand-surface-2) 94%, var(--brand-paper));

    --status-error-bg: rgba(176, 42, 55, 0.18);
    --status-error-border: rgba(176, 42, 55, 0.28);
    --status-error-fg: #ff9da8;
    --status-success-bg: rgba(10, 125, 79, 0.18);
    --status-success-border: rgba(10, 125, 79, 0.28);
    --status-success-fg: #7fdbaf;
    --status-warning-bg: rgba(180, 106, 0, 0.18);
    --status-warning-border: rgba(180, 106, 0, 0.28);
    --status-warning-fg: #ffd08c;

    --mix-lighten: #08111b;
    --mix-darken: white;

    color-scheme: dark;
}

* {
    border-color: var(--border);
}

html,
body {
    min-height: 100%;
}

body {
    font-family: var(--font-sans);
    font-feature-settings: "cv11", "ss01", "tnum";
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.005em;
    background-color: var(--background);
    color: var(--foreground);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-display);
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);
}

code,
kbd,
pre,
samp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

a,
.btn-link {
    color: color-mix(in srgb, var(--primary) 88%, var(--brand-teal-deep));
}

:is(button, a, input, select, textarea, summary):focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.1rem var(--background), 0 0 0 0.25rem var(--ring);
}

.main-layout__inset {
    background: var(--shell-canvas) !important;
}

/* Sidebar chrome only — width/min-width/flex-basis intentionally omitted.
   BB's own Tailwind classes on the <aside> (`w-[var(--sidebar-width)]` plus
   `data-[state=collapsed]:w-[var(--sidebar-width-icon)]`) handle width and
   the expanded↔collapsed swap. Pinning width with !important here broke the
   collapse; the branding-era size is expressed instead via --sidebar-width
   in app.css. */
.main-layout__sidebar {
    border-right: 1px solid var(--shell-nav-border) !important;
    background: var(--shell-nav-surface) !important;
    color: var(--shell-nav-foreground) !important;
    box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.03);
}

.main-layout__sidebar [data-sidebar="footer"] {
    border-top: 1px solid var(--shell-nav-border) !important;
}

.main-layout__sidebar [data-sidebar="menu-button"],
.main-layout__sidebar [data-sidebar="menu-button"]:visited,
.main-layout__sidebar .main-nav__item-icon,
.main-layout__sidebar .main-nav__logout-button {
    color: var(--shell-nav-foreground) !important;
}

.main-layout__sidebar [data-sidebar="menu-button"]:hover,
.main-layout__sidebar [data-sidebar="menu-button"][data-active="true"],
.main-layout__sidebar [data-sidebar="menu-button"][aria-current="page"],
.main-layout__sidebar .main-nav__logout-button:hover,
.main-layout__sidebar .main-nav__logout-button:focus-visible {
    background: var(--shell-nav-active-fill) !important;
    color: var(--shell-nav-active-foreground) !important;
}

.main-layout__sidebar [data-sidebar="group-label"],
.main-layout__sidebar .main-nav__brand-copy,
.main-layout__sidebar .main-nav__footer-email {
    color: var(--shell-nav-muted) !important;
}

.main-layout__sidebar .main-nav__brand-title,
.main-layout__sidebar .main-nav__footer-name {
    color: var(--shell-nav-foreground) !important;
}

.main-nav__brand-logo {
    padding: 0.25rem 0 0.1rem;
}

.main-nav__logo-image {
    height: 4rem;
    object-fit: contain;
}

.main-nav__brand-mark {
    border-radius: 0.875rem;
    color: #ffffff;
    background:
        linear-gradient(135deg, transparent 46%, var(--brand-lime) 46% 100%),
        var(--brand-teal);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.main-layout__topbar,
.site-admin-layout__topbar,
.platform-admin-layout__topbar {
    min-height: var(--topbar-h);
    padding: 0.75rem 1.5rem;
    border-bottom: 1px solid var(--shell-topbar-border);
    background: color-mix(in srgb, var(--shell-topbar-surface) 92%, white);
    backdrop-filter: blur(16px);
    box-shadow: var(--shadow-sm);
}

.main-layout__eyebrow,
.site-admin-layout__eyebrow,
.platform-admin-layout__eyebrow {
    display: block;
    margin-bottom: 0.15rem;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--primary);
}

.main-layout__headline,
.site-admin-layout__headline,
.platform-admin-layout__headline {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--foreground);
}

.main-layout__copy,
.site-admin-layout__copy,
.platform-admin-layout__copy {
    color: var(--shell-topbar-copy);
}

.main-layout__topbar-icon,
.site-admin-layout__topbar-icon,
.platform-admin-layout__topbar-icon {
    border-radius: var(--radius);
    color: var(--muted-foreground);
}

.main-layout__topbar-icon:hover,
.site-admin-layout__topbar-icon:hover,
.platform-admin-layout__topbar-icon:hover {
    background: var(--accent-soft);
    color: color-mix(in srgb, var(--primary) 80%, var(--brand-ink));
}

.main-layout__topbar-avatar,
.site-admin-layout__topbar-avatar,
.platform-admin-layout__topbar-avatar {
    border: 1px solid var(--brand-border);
    background: color-mix(in srgb, var(--brand-surface-2) 88%, var(--brand-surface));
    color: var(--brand-ink);
    box-shadow: var(--shadow-sm);
}

.main-layout__surface,
.site-admin-layout__body,
.platform-admin-layout__body {
    background:
        radial-gradient(circle at top right, rgba(165, 206, 77, 0.08), transparent 24%),
        linear-gradient(180deg, color-mix(in srgb, var(--brand-paper) 94%, white) 0%, var(--brand-paper) 100%);
}

.main-layout__surface,
.site-admin-layout__body,
.platform-admin-layout__body {
    padding: 1.5rem;
}

.platform-admin-layout__body:has(> .platform-admin-market-focus) {
    padding-top: 0;
}

.main-layout__command-surface {
    border-color: var(--shell-command-border);
    border-radius: var(--radius);
    background: var(--shell-command-surface);
    box-shadow: var(--shadow-sm);
}

.main-layout__command-surface:hover,
.main-layout__command-surface:focus-visible {
    border-color: var(--accent-outline);
    background: var(--shell-command-hover);
    box-shadow: var(--shadow-md);
}

.platform-admin-shell-surface__error-card {
    border-color: var(--status-error-border);
    background: linear-gradient(180deg, color-mix(in srgb, var(--status-error-bg) 64%, var(--card)) 0%, var(--card) 100%);
}

.platform-admin-shell-surface__error-content p,
.platform-admin-shell-surface__connector-summary,
.platform-admin-shell-surface__connector-metrics span:last-child {
    color: var(--muted-foreground);
}

.platform-admin-shell-surface__hero,
.platform-admin-shell-surface__hero--overview {
    border-color: color-mix(in srgb, var(--brand-teal-deep) 16%, var(--brand-border));
    border-radius: calc(var(--radius-lg) + 0.25rem);
    background:
        radial-gradient(circle at top right, rgba(165, 206, 77, 0.2), transparent 30%),
        linear-gradient(135deg, color-mix(in srgb, var(--brand-teal-deep) 94%, white) 0%, color-mix(in srgb, var(--brand-navy) 88%, white) 100%);
    color: #ffffff;
    box-shadow: var(--shadow-md);
}

.platform-admin-shell-surface__hero-copy h1,
.platform-admin-shell-surface__hero-meta dd,
.platform-admin-shell-surface__connector-metrics strong {
    color: inherit;
}

.platform-admin-shell-surface__hero-copy p {
    color: rgba(255, 255, 255, 0.8);
}

.platform-admin-shell-surface__hero-meta div {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: none;
}

.platform-admin-shell-surface__hero-meta dt,
.platform-admin-shell-surface__connector-label {
    color: var(--brand-lime);
}

.platform-admin-shell-surface__connector-card,
.platform-admin-shell-surface__connector-card--healthy,
.platform-admin-shell-surface__connector-card--degraded,
.platform-admin-shell-surface__connector-card--disconnected,
.platform-admin-shell-surface__connector-card--misconfigured,
.platform-admin-shell-surface__connector-card--error {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.platform-admin-shell-surface__connector-card {
    border-color: var(--brand-border);
    background: var(--card);
}

.platform-admin-shell-surface__connector-card--healthy {
    border-color: color-mix(in srgb, var(--pos) 28%, var(--brand-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--pos-soft) 66%, var(--card)) 0%, var(--card) 100%);
}

.platform-admin-shell-surface__connector-card--degraded {
    border-color: color-mix(in srgb, var(--warn) 28%, var(--brand-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--warn-soft) 66%, var(--card)) 0%, var(--card) 100%);
}

.platform-admin-shell-surface__connector-card--disconnected {
    border-color: color-mix(in srgb, var(--info) 28%, var(--brand-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--info-soft) 62%, var(--card)) 0%, var(--card) 100%);
}

.platform-admin-shell-surface__connector-card--misconfigured,
.platform-admin-shell-surface__connector-card--error {
    border-color: color-mix(in srgb, var(--neg) 28%, var(--brand-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--neg-soft) 64%, var(--card)) 0%, var(--card) 100%);
}

.platform-admin-shell-surface__connector-mark {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px var(--brand-border);
}

.platform-admin-shell-surface__connector-metrics > div,
.platform-admin-shell-surface__module-item,
.platform-admin-shell-surface__details div {
    border-color: var(--brand-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--card) 92%, var(--brand-surface-2));
}

.sales-dashboard {
    --workspace-accent: var(--brand-teal);
}

.sales-dashboard__kpi-eyebrow {
    color: color-mix(in srgb, var(--brand-teal-deep) 72%, var(--brand-teal));
}

.sales-dashboard__status {
    background: var(--accent-soft);
    color: color-mix(in srgb, var(--primary) 76%, var(--brand-ink));
}

.sales-dashboard__status--stale {
    background: var(--status-warning-bg);
    color: var(--status-warning-fg);
}

.sales-dashboard__unified-pipeline {
    border-color: var(--brand-border);
    border-radius: var(--radius-lg);
    background: var(--card);
    box-shadow: var(--shadow-sm);
}

.sales-dashboard__unified-pipeline .sales-dashboard__board-section,
#sales-dashboard-board {
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--brand-surface) 88%, var(--shell-sales-board)) 0%, var(--shell-sales-board) 100%);
}

.sales-dashboard__lane--drop-target {
    background: color-mix(in srgb, var(--brand-lime) 16%, transparent);
}

#sales-dashboard-board .sales-dashboard__lane-header {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: var(--brand-surface);
    box-shadow: var(--shadow-sm);
}

#sales-dashboard-board .sales-dashboard__lane-header h2,
#sales-dashboard-board .sales-dashboard__lane-meta {
    color: var(--muted-foreground);
}

#sales-dashboard-board .sales-dashboard__lane-body {
    border: 1px solid var(--brand-border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--brand-surface-2) 88%, var(--brand-paper));
}

.sales-dashboard__message {
    border-radius: var(--radius);
}

.sales-dashboard__message--error {
    border-color: var(--status-error-border);
    background: var(--status-error-bg);
    color: var(--status-error-fg);
}

.sales-dashboard__message--success {
    border-color: var(--status-success-border);
    background: var(--status-success-bg);
    color: var(--status-success-fg);
}

@media (max-width: 900px) {
    .main-layout__topbar,
    .site-admin-layout__topbar,
    .platform-admin-layout__topbar,
    .main-layout__surface,
    .site-admin-layout__body,
    .platform-admin-layout__body {
        padding-inline: 1rem;
    }
}