: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: rgb(12 69 155 / 7%);
	--with-sidebar-nav-item-bg-active: rgb(12 69 155 / 7%);
	--with-sidebar-nav-item-bg-pressed: rgb(12 69 155 / 10%);
	--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: #404e6b;
	--with-sidebar-create-btn-bg-hover: var(--blue-05);
	/* Its own foreground: the sidebar's text colour is dark here, which was
	   right on the old white button and unreadable on this one. */
	--with-sidebar-create-btn-fg: var(--white);
	/* What Create was before it became a filled action, kept for the secondary
	   one stacked under it on the closed rail. */
	--with-sidebar-chat-history-bg: var(--white);
	--with-sidebar-chat-history-bg-hover: rgb(12 69 155 / 4%);
	--with-sidebar-card-shadow: 0px 1px 1px 0px rgb(0 0 0 / 5%), 0px 1px 1px 0px rgb(0 0 0 / 1%), 0px 2px 1px 0px rgb(0 0 0 / 0%), 0px 0px 0px 1px rgb(64 78 107 / 6%);
	--with-sidebar-section-divider-color: rgb(12 69 155 / 7%);
	--with-sidebar-credits-bg: linear-gradient(90deg, rgb(255 255 255 / 100%) 0%, rgb(235 247 255 / 100%) 100%);
	--with-sidebar-referral-bg: linear-gradient(90deg, rgb(255 255 255 / 100%) 0%, rgb(245 235 255 / 100%) 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: rgb(64 78 107 / 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: #fff;

	/* 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: rgb(64 78 107 / 6%);
	--agent-studio-border-strong: rgb(12 69 155 / 7%);
	--agent-studio-border-focus: rgb(12 69 155 / 15%);
	--agent-studio-hover-bg: rgb(12 69 155 / 4%);
	--agent-studio-selected-bg: rgb(12 55 169 / 7%);
	--agent-studio-text-primary: var(--brand-color);
	--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: rgb(99 102 241 / 10%);
	--agent-studio-badge-recurring-fg: #6366f1;
	--agent-studio-badge-neutral-bg: rgb(12 69 155 / 7%);
	--agent-studio-badge-neutral-fg: #5b606d;
	--agent-studio-badge-approval-bg: rgb(12 69 155 / 12%);
	--agent-studio-badge-approval-fg: #0c459b;
	--agent-studio-badge-error-bg: rgb(225 29 72 / 10%);
	--agent-studio-badge-error-fg: #e11d48;
	--agent-studio-badge-success-fg: #059669;
	--agent-studio-badge-success-bg: rgb(41 204 106 / 6%);
	--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: rgb(245 158 11 / 10%);
	--callout-warning-border: rgb(245 158 11 / 30%);
	--callout-warning-fg: #b45309;
	--callout-warning-icon: #f59e0b;

	/* Agent Studio sidebar */
	--agent-studio-sidebar-bg: var(--light, #f8f9fb);
	--agent-studio-sidebar-border-color: rgb(64 78 107 / 6%);
	--agent-studio-sidebar-title-color: var(--grey-04-text);
	--agent-studio-sidebar-item-color: var(--grey-06-text);
	--agent-studio-sidebar-item-hover-bg: rgb(12 55 169 / 4%);
	--agent-studio-sidebar-item-active-bg: rgb(12 55 169 / 7%);
	--agent-studio-sidebar-item-active-color: var(--grey-06-text);

	/* Agent Studio integrations */
	--agent-integrations-card-bg: rgb(244 246 249 / 20%);
	--agent-integrations-card-border: rgb(12 69 155 / 7%);
	--agent-integrations-search-border: rgb(12 69 155 / 7%);
	--agent-integrations-search-border-focus: rgb(12 69 155 / 15%);
	--agent-integrations-divider-color: rgb(168 157 187 / 20%);
	--agent-integrations-input-bg: rgb(244 246 249 / 40%);
	--agent-integrations-input-border: rgb(12 69 155 / 10%);
	--agent-integrations-input-border-focus: rgb(12 69 155 / 20%);
	--agent-integrations-hover-bg: rgb(12 69 155 / 4%);
	--agent-integrations-skeleton-bg: rgb(12 69 155 / 4%);
	--agent-integrations-tool-item-bg: rgb(12 69 155 / 2%);

	/* 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);
}