:root {
	/* With sidebar layout */
	--with-sidebar-root-bg: var(--light, #f4f6f9);
	--with-sidebar-nav-item-color: var(--grey-06-text);
	--with-sidebar-nav-item-color-hover: var(--grey-06-text);
	--with-sidebar-nav-item-color-active: var(--grey-06-text);
	--with-sidebar-nav-item-color-pressed: var(--grey-06-text);
	--with-sidebar-nav-item-icon-color: var(--grey-04-text);
	--with-sidebar-nav-item-icon-color-hover: var(--grey-06-text);
	--with-sidebar-nav-item-icon-color-active: var(--grey-06-text);
	--with-sidebar-nav-item-bg: transparent;
	--with-sidebar-nav-item-bg-hover: rgba(12, 69, 155, 0.07);
	--with-sidebar-nav-item-bg-active: rgba(12, 69, 155, 0.07);
	--with-sidebar-nav-item-bg-pressed: rgba(12, 69, 155, 0.1);
	--with-sidebar-nav-divider-color: #d6dbe5;
	--with-sidebar-sidebar-color: var(--grey-06-text);
	--with-sidebar-logo-color: var(--black);
	--with-sidebar-custom-logo-filter: none;
	--with-sidebar-create-btn-bg: var(--white);
	--with-sidebar-create-btn-bg-hover: rgba(12, 69, 155, 0.04);
	--with-sidebar-card-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.05), 0px 1px 1px 0px rgba(0, 0, 0, 0.01), 0px 2px 1px 0px rgba(0, 0, 0, 0), 0px 0px 0px 1px rgba(64, 78, 107, 0.06);
	--with-sidebar-section-divider-color: rgba(12, 69, 155, 0.07);
	--with-sidebar-credits-bg: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(235, 247, 255, 1) 100%);
	--with-sidebar-upgrade-color: var(--link);
	--with-sidebar-group-label-color: var(--grey-04-text);
	--with-sidebar-main-content-bg: #fcfdfd;

	/* Workspace switch */
	--workspace-switch-arrow-color: #404e6b;
	--workspace-switch-counter-color: #7e828e;
	--workspace-switch-name-color: #000;
	--workspace-switch-dropdown-name-color: var(--white);

	/* User head block */
	--user-head-block-arrow-color: #404e6b;
	--user-head-block-create-btn-bg: #404e6b;
	--user-head-block-create-btn-bg-hover: var(--blue-05);
	--user-head-block-create-btn-color: var(--white);
	--header-credits-color: #2D3142;
	--header-credits-buy-more-color: #406ece;
	--header-credits-buy-more-color-hover: #2d4a8c;

	/* Buttons */
	--btn-border-radius: 8px;
	--btn-border-radius-lg: 10px;
	--btn-border-radius-sm: 6px;

	/* Primary button */
	--primary-btn-bg: #404e6b;
	--primary-btn-color: var(--white);
	--primary-btn-bg-hover: #556486;
	--primary-btn-color-hover: var(--white);

	/* Default solid button */
	--btn-default-solid-bg: var(--blue-02);
	--btn-default-solid-bg-hover: var(--light-blue-03);
	--btn-default-solid-bg-disabled: var(--grey-01-stroke);
	--btn-default-solid-color: var(--grey-06-text);
	--btn-default-solid-color-hover: var(--grey-06-text);
	--btn-default-solid-color-disabled: var(--grey-04-text);
	--btn-default-solid-border-color: transparent;
	--btn-default-solid-border-color-hover: transparent;
	--btn-default-solid-border-color-disabled: transparent;

	/* Sign in form */
	--sign-in-form-label-color: #2d3142;
	--sign-in-form-input-border-radius: 0.5rem;

	/* Sign up form */
	--sign-up-form-label-color: #2d3142;
	--sign-up-form-input-border-radius: 0.5rem;

	/* Forgot password form */
	--forgot-password-form-label-color: #2d3142;
	--forgot-password-form-input-border-radius: 0.5rem;

	/* Create new password form */
	--create-new-password-form-label-color: #2d3142;
	--create-new-password-form-input-border-radius: 0.5rem;

	/* White label auth */
	--wl-auth-layout-bg: #fff;
	--wl-auth-layout-color: #000;
	--wl-auth-layout-form-wrap-background: transparent;
	--wl-auth-layout-form-wrap-max-width: 380px;
	--wl-auth-layout-form-wrap-padding: 0;
	--wl-auth-layout-form-wrap-margin: 80px 0 0 0;
	--wl-auth-layout-form-wrap-border: none;
	--wl-auth-layout-form-wrap-border-radius: 0;
	--wl-auth-layout-form-wrap-box-shadow: none;
	--wl-auth-layout-form-wrap-gap: 40px;
	--wl-auth-layout-header-gap: 8px;
	--wl-auth-layout-header-background: none;
	--wl-auth-layout-header-icon-display: none;
	--wl-auth-layout-title-weight: 500;
	--wl-auth-layout-subtitle-mt: 0;

	/* Custom loading modal */
	--custom-loading-modal-bg: radial-gradient(
		86.34% 86.34% at 50% 37.18%,
		#404e6b 0%,
		#2d3142 100%
	);
	--custom-loading-modal-color: #fff;
	--custom-loading-modal-sub-title-color: #cbd7f0;
	--custom-loading-modal-spinner-color: #8795b8;
	--custom-loading-modal-decor-circle-bg: linear-gradient(0deg, #404e6b, #6b7aa1) border-box;

	/* Custom progress modal */
	--custom-progress-modal-bg: radial-gradient(
		86.34% 86.34% at 50% 37.18%,
		#404e6b 0%,
		#2d3142 100%
	);
	--custom-progress-modal-await-state-color: #6b7aa1;
	--custom-progress-modal-loading-state-color: #fff;
	--custom-progress-modal-completed-badge-color: #6b7aa1;
	--custom-progress-modal-steps-line-color: #404e6b;
	--custom-progress-modal-sub-title-color: #cbd7f0;
	--custom-progress-modal-back-grid-color: #6b7aa1;

	/* Generic surface + text tokens — used by shadcn primitives (Card, Tabs,
	 * Alert, Slider, SlidingTabs) and any feature CSS that previously
	 * hardcoded `#fff` / `#2d3142`. Override in dark/index.css. */
	--surface-primary: var(--white, #fff);
	--surface-secondary: var(--slightly-light, #f8f9fb);
	--text-primary: var(--grey-06-text, #2d3142);
	--base-card-foreground: var(--grey-06-text, #2d3142);

	/* Agent Studio — shared surfaces */
	--agent-studio-surface: white;
	--agent-studio-surface-raised: white;
	--agent-studio-surface-subtle: #f8f9fb;
	--agent-studio-page-bg: #fff;
	--agent-studio-page-glow-1: rgb(10 194 53 / 14%);
	--agent-studio-page-glow-2: rgb(64 110 206 / 18%);
	--agent-studio-page-dot-color: rgb(64 78 107 / 9%);
	--agent-studio-org-chart-link: rgba(64, 78, 107, 0.25);
	/* Slightly stronger than text-primary, used for hover affordances on
	 * lists / activity rows where we want a subtle "brighter" feel. */
	--agent-studio-text-emphasis: var(--brand-color, #404e6b);

	/* Skill tier badges (System / Custom) */
	--skill-tier-system-bg: rgb(59 130 246 / 12%);
	--skill-tier-system-fg: #1d4ed8;
	--skill-tier-user-bg: rgb(16 185 129 / 12%);
	--skill-tier-user-fg: #047857;

	/* Shadcn Slider — separate tokens so dark mode can lift the track + fill
	 * + thumb above the page surface without affecting other consumers of
	 * `--brand-color` / `--grey-02-stroke`. */
	--slider-track-bg: var(--grey-02-stroke);
	--slider-range-bg: var(--brand-color, #404e6b);
	--slider-thumb-bg: var(--white, #fff);
	--slider-thumb-border: var(--brand-color, #404e6b);
	--slider-anchor-border: var(--grey-04-text, #6b7280);

	/* Shadcn Button — outline variant tokens (light theme keeps the
	 * original `bg-background` / `border-border` look) */
	--btn-outline-bg: var(--white, #fff);
	--btn-outline-border: var(--grey-02-stroke, rgb(0 0 0 / 8%));
	--btn-outline-fg: var(--grey-06-text, #2d3142);
	--btn-outline-bg-hover: var(--slightly-light, #f4f6f9);
	--btn-outline-fg-hover: var(--grey-06-text, #2d3142);

	/* Danger button — light red on light red tint */
	--btn-danger-bg: hsl(0deg 97% 66% / 10%);
	--btn-danger-fg: #e11d48;
	--btn-danger-bg-hover: hsl(0deg 97% 66% / 18%);

	/* Shadcn Switch */
	--switch-off-bg: var(--grey-02-stroke, #dadfea);
	--switch-on-bg: var(--brand-color, #404e6b);
	--switch-thumb-bg: #ffffff;

	/* Create-content mode colours — shared by the welcome cards and the
	 * chat-history category labels so brainstorm/instant/plan look the
	 * same colour everywhere. Both AA on light surface. */
	--mode-brainstorm-fg: #7c3aed;
	--mode-instant-fg: #d97706;
	--mode-plan-fg: #059669;
	--mode-interview-fg: #406ece;
	--mode-agent-from: #00a2ff;
	--mode-agent-to: #80d8ff;

	/* ModeTabs welcome cards — defaults match the original light theme. */
	--mode-tab-bg: transparent;
	--mode-tab-bg-active: var(--white, #fff);
	--mode-tab-hover-bg: rgb(255 255 255 / 60%);
	--mode-tab-shadow: none;
	--mode-tab-shadow-active:
		0 0 0 1px rgb(64 78 107 / 6%),
		0 1px 2px 0 rgb(64 78 107 / 6%),
		0 3px 3px 0 rgb(64 78 107 / 5%),
		0 7px 4px 0 rgb(64 78 107 / 3%),
		0 12px 5px 0 rgb(64 78 107 / 1%);

	--agent-studio-border: rgba(64, 78, 107, 0.06);
	--agent-studio-border-strong: rgba(12, 69, 155, 0.07);
	--agent-studio-border-focus: rgba(12, 69, 155, 0.15);
	--agent-studio-hover-bg: rgba(12, 69, 155, 0.04);
	--agent-studio-selected-bg: rgba(12, 55, 169, 0.07);
	--agent-studio-text-primary: var(--grey-06-text);
	--agent-studio-text-secondary: var(--grey-05-text);
	--agent-studio-text-tertiary: var(--grey-04-text);
	--agent-studio-text-code: #556486;

	/* Agent Studio — status badges */
	--agent-studio-badge-recurring-bg: rgba(99, 102, 241, 0.1);
	--agent-studio-badge-recurring-fg: #6366f1;
	--agent-studio-badge-neutral-bg: rgba(12, 69, 155, 0.07);
	--agent-studio-badge-neutral-fg: #5b606d;
	--agent-studio-badge-approval-bg: rgba(12, 69, 155, 0.12);
	--agent-studio-badge-approval-fg: #0c459b;
	--agent-studio-badge-error-bg: rgba(225, 29, 72, 0.1);
	--agent-studio-badge-error-fg: #e11d48;
	--agent-studio-badge-success-fg: #059669;
	--agent-studio-badge-success-bg: rgba(41, 204, 106, 0.06);
	--agent-studio-badge-warning-fg: #f97316;

	/* Agent Studio — brand accent (primary action button) */
	--agent-studio-brand-accent: var(--brand-color, #404e6b);
	--agent-studio-brand-accent-fg: var(--white, #fff);
	--agent-studio-brand-accent-hover: var(--blue-05, #556486);

	/* Activity heatmap (Overview) */
	--activity-heatmap-0: rgb(121 176 243 / 10%);
	--activity-heatmap-1: rgb(121 176 243 / 25%);
	--activity-heatmap-2: rgb(121 176 243 / 50%);
	--activity-heatmap-3: rgb(121 176 243 / 75%);
	--activity-heatmap-4: #79b0f3;
	--activity-heatmap-skeleton: rgb(121 176 243 / 12%);

	/* Callouts */
	--callout-warning-bg: rgba(245, 158, 11, 0.1);
	--callout-warning-border: rgba(245, 158, 11, 0.3);
	--callout-warning-fg: #b45309;
	--callout-warning-icon: #f59e0b;

	/* Agent Studio sidebar */
	--agent-studio-sidebar-bg: var(--light, #f8f9fb);
	--agent-studio-sidebar-border-color: rgba(64, 78, 107, 0.06);
	--agent-studio-sidebar-title-color: var(--grey-04-text);
	--agent-studio-sidebar-item-color: var(--grey-06-text);
	--agent-studio-sidebar-item-hover-bg: rgba(12, 55, 169, 0.04);
	--agent-studio-sidebar-item-active-bg: rgba(12, 55, 169, 0.07);
	--agent-studio-sidebar-item-active-color: var(--grey-06-text);

	/* Agent Studio integrations */
	--agent-integrations-card-bg: rgba(244, 246, 249, 0.2);
	--agent-integrations-card-border: rgba(12, 69, 155, 0.07);
	--agent-integrations-search-border: rgba(12, 69, 155, 0.07);
	--agent-integrations-search-border-focus: rgba(12, 69, 155, 0.15);
	--agent-integrations-divider-color: rgba(168, 157, 187, 0.2);
	--agent-integrations-input-bg: rgba(244, 246, 249, 0.4);
	--agent-integrations-input-border: rgba(12, 69, 155, 0.1);
	--agent-integrations-input-border-focus: rgba(12, 69, 155, 0.2);
	--agent-integrations-hover-bg: rgba(12, 69, 155, 0.04);
	--agent-integrations-skeleton-bg: rgba(12, 69, 155, 0.04);
	--agent-integrations-tool-item-bg: rgba(12, 69, 155, 0.02);

	/* Supernova */
	--supernova-wrapper-border: none;
	--supernova-wrapper-border-radius: 0;

	/* Item list ideas */
	--item-list-ideas-dropdown-button-color: #284fba;

	/* Trendmaster on dashboard */
	--trendmaster-topics-wrapper-color: var(--black);
	--trendmaster-topics-wrapper-bg: radial-gradient(53.34% 78.53% at 35.1% 58.18%, #94dfbb 0.86%, #cbd9fe 100%);
	--trendmaster-topics-nav-color: var(--black);
	--trendmaster-topics-nav-hover-color: var(--black);
	--trendmaster-topics-nav-hover-bg: var(--white);
	--trendmaster-trending-status-border: 1px solid #b55b081a;
	--trendmaster-trending-status-color: #b55b08;
	--trendmaster-trending-status-bg-color: #fff7e5;
	--trendmaster-trending-hash-color: #406ece;
	--trendmaster-trend-card-color: var(--grey-06-text);
	--trendmaster-trend-card-bg: rgb(255 255 255 / 50%);
	--trendmaster-empty-trends-animation-color: var(--link);

	/* Feeds */
	--feeds-card-empty-item-bg: linear-gradient(95.29deg,	#f4f6f9 1.94%, rgb(223 229 244 / 30%) 54.17%, rgb(223 229 244 / 70%) 97.23%);

	/* Twin */
	--twin-force-graph-container-canvas-bg: #f4f6f9;

	/* Optimize dropdown */
	--optimize-dropdown-button-before-bg: linear-gradient(rgb(64 110 206 / 30%) 0%, rgb(171 194 249 / 30%) 50%, rgb(64 110 206 / 30%) 100%);

	/* Dashboard quick action */
	--dashboard-quick-action-bg: var(--white);
	--dashboard-quick-action-hover-bg: var(--white);
	--dashboard-quick-action-border-color: var(--grey-01-stroke);
	--dashboard-quick-action-hover-border-color: var(--grey-01-stroke);
	--dashboard-quick-action-wrapper-icon-bg: var(--light-blue-02);
	--dashboard-quick-action-wrapper-icon-hover-bg: var(--light-blue-02);
}