@import url('/themes/default/index.css');

/* aitWinBrainV2 — bold coral/pink brand on a soft-white surface.
 * Inherits the default light theme above; the rules below recolor the brand
 * palette, the coral sidebar, and the brand-accent surfaces. Most accent
 * tokens in the default theme resolve through var(--brand-color)/var(--link)/
 * var(--blue-*), so the base-palette overrides also recolor links, switches,
 * sliders and the agent-studio accents for free.
 *
 * Brand:    #f78a8c   Accent 1: #f48ab7   Accent 2: #da7bb4   Accent 3: #c871c4
 * Surface:  #f6f6f6   Text:     #4a4a4a
 *
 * Sidebar text is dark (#4a4a4a) rather than white: dark-on-coral is ~3.7:1
 * while white-on-coral is only ~2.3:1, so dark reads better and matches the
 * white "Create" card / white active pill in the brand mock-up. */
:root {
	/* ── Base palette / globals overwrite ── */
	--brand-color: #f78a8c;
	--link: #d1565c; /* darkened coral — readable link on a light surface */
	--link-light: #f78a8c1a;
	--blue-05: #e2767a; /* darker brand, used for hover states */
	--blue-04: #da7bb4; /* accent 2 */
	--blue-03: #f48ab7; /* accent 1 */
	--blue-02: #fbd3d4; /* light coral */
	--light-blue-03: #f7e0e1;
	--light-blue-02: #fce9ea;
	--light-blue-01: #fce9ea;
	--light-blue-alpha-01: #f78a8c;
	--light-alpha-01: #f78a8c;
	--highlight: #f48ab7; /* accent 1 */
	--highlight-01: #f7e0e1;
	--grey-06-text: #4a4a4a; /* primary text */
	--light: #f6f6f6; /* soft-white surface */

	/* ── Primary button (coral fill, dark-gray text) ── */
	--primary-btn-bg: #f78a8c;
	--primary-btn-color: #4a4a4a;
	--primary-btn-bg-hover: #e2767a;
	--primary-btn-color-hover: #4a4a4a;

	/* ── Sidebar (bold coral fill, dark text, white create card + active pill) ── */
	--with-sidebar-root-bg: #f78a8c;
	--with-sidebar-sidebar-color: #4a4a4a;
	--with-sidebar-nav-item-color: #4a4a4a;
	--with-sidebar-nav-item-color-hover: #2e2e2e;
	--with-sidebar-nav-item-color-active: #b83f46;
	--with-sidebar-nav-item-color-pressed: #b83f46;
	--with-sidebar-nav-item-icon-color: rgba(74, 74, 74, 0.85);
	--with-sidebar-nav-item-icon-color-hover: #2e2e2e;
	--with-sidebar-nav-item-icon-color-active: #b83f46;
	--with-sidebar-nav-item-bg: transparent;
	--with-sidebar-nav-item-bg-hover: rgba(255, 255, 255, 0.32);
	--with-sidebar-nav-item-bg-active: #ffffff;
	--with-sidebar-nav-item-bg-pressed: rgba(255, 255, 255, 0.85);
	--with-sidebar-nav-divider-color: rgba(74, 74, 74, 0.18);
	--with-sidebar-logo-color: #4a4a4a;
	--with-sidebar-create-btn-bg: #ffffff;
	--with-sidebar-create-btn-bg-hover: #fff5f5;
	--with-sidebar-card-shadow: 0px 1px 2px 0px rgba(74, 30, 31, 0.14), 0px 0px 0px 1px rgba(74, 30, 31, 0.06);
	--with-sidebar-section-divider-color: rgba(74, 74, 74, 0.14);
	--with-sidebar-credits-bg: linear-gradient(90deg, #fde3e4 0%, #fbd3d4 100%);
	--with-sidebar-upgrade-color: #b83f46;
	--with-sidebar-group-label-color: rgba(74, 74, 74, 0.7);
	--with-sidebar-main-content-bg: #f6f6f6; /* soft-white card */

	/* ── Header / workspace switch ── */
	--user-head-block-create-btn-bg: #f78a8c;
	--user-head-block-create-btn-color: #4a4a4a;
	--user-head-block-arrow-color: #4a4a4a;
	--workspace-switch-arrow-color: #4a4a4a;
	--header-credits-buy-more-color: #d1565c;
	--header-credits-buy-more-color-hover: #b83f46;

	/* ── Brand-accent foregrounds (dark text on coral) ── */
	--agent-studio-brand-accent-fg: #4a4a4a;
	--pm-accent-hover: #b83f46;

	/* ── Loading / progress modals (coral → pink) ── */
	--custom-loading-modal-bg: radial-gradient(86.34% 86.34% at 50% 37.18%, #f78a8c 0%, #da7bb4 100%);
	--custom-loading-modal-sub-title-color: #fde3e4;
	--custom-loading-modal-spinner-color: #f7b8b9;
	--custom-loading-modal-decor-circle-bg: linear-gradient(0deg, #f78a8c, #f48ab7) border-box;
	--custom-progress-modal-bg: radial-gradient(86.34% 86.34% at 50% 37.18%, #f78a8c 0%, #da7bb4 100%);
	--custom-progress-modal-await-state-color: #f7b8b9;
	--custom-progress-modal-completed-badge-color: #fde3e4;
	--custom-progress-modal-steps-line-color: #f78a8c;
	--custom-progress-modal-sub-title-color: #fde3e4;
	--custom-progress-modal-back-grid-color: #f7b8b9;

	/* ── Misc accents ── */
	--trendmaster-trending-hash-color: #d1565c;
	--item-list-ideas-dropdown-button-color: #d1565c;
	--optimize-dropdown-button-before-bg: linear-gradient(rgba(247, 138, 140, 0.3) 0%, rgba(244, 138, 183, 0.3) 50%, rgba(247, 138, 140, 0.3) 100%);
	--dashboard-quick-action-hover-bg: #fce9ea;
}

/* ── Dark mode ──
 * For hosts mapped to this theme the middleware re-forces the `aitWinBrainV2`
 * cookie every request, so the generic `themes/dark/index.css` is NEVER loaded
 * even when the user toggles dark mode — this file is the only theme CSS in
 * play. The base `.dark {}` in variables.css only covers the modern shadcn /
 * agent-studio / pm-* tokens; the LEGACY families (sidebar, header, dashboard,
 * surfaces, trendmaster) stay on the light coral `:root` values above and leak
 * onto the dark shell — which is what made dark mode unreadable.
 *
 * Fix: adopt Pressmaster's default dark surfaces (#2d3142 / #353a4d / #3c4156,
 * #e8eaf0 text) ported from `themes/dark/index.css`, and layer the coral brand
 * palette on top as accents (links, active nav, primary button, upgrade, brand
 * accent). The sidebar goes dark-navy like default dark — a bold coral sidebar
 * next to a dark content area clashed and fought the white nav text that the
 * `.dark .host` rule forces. `html.dark` (0,1,1) wins over the base `.dark {}`. */
html.dark {
	/* ── Sidebar → dark-navy shell (Sidebar.module.css `.dark .host` supplies
	 * the light nav text; we only restyle the chrome around it) ── */
	--with-sidebar-root-bg: #2d3142;
	--with-sidebar-sidebar-color: #e8eaf0;
	--with-sidebar-logo-color: #ffffff;
	--with-sidebar-nav-divider-color: #424655;
	--with-sidebar-section-divider-color: #424655;
	--with-sidebar-create-btn-bg: #3c4156;
	--with-sidebar-create-btn-bg-hover: rgba(255, 255, 255, 0.1);
	--with-sidebar-card-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 0.06);
	--with-sidebar-credits-bg: linear-gradient(90deg, #2d3142 0%, #3c4156 100%);
	--with-sidebar-group-label-color: #9da4ba;
	--with-sidebar-upgrade-color: #f9a0a2; /* coral accent on the upgrade link */
	--with-sidebar-main-content-bg: #353a4d; /* dark content card (was leaking #f6f6f6) */

	/* ── Header / workspace switch / user head ── */
	--workspace-switch-arrow-color: #ffffff;
	--workspace-switch-counter-color: #9da4ba;
	--workspace-switch-name-color: #ffffff;
	--workspace-switch-dropdown-name-color: #ffffff;
	--user-head-block-arrow-color: #ffffff;
	--user-head-block-create-btn-bg: #f78a8c; /* coral create button */
	--user-head-block-create-btn-bg-hover: #e2767a;
	--user-head-block-create-btn-color: #4a4a4a;
	--header-credits-color: #ffffff;
	--header-credits-buy-more-color: #f9a0a2;
	--header-credits-buy-more-color-hover: #fbbcbe;

	/* ── Generic surfaces / text ── */
	--surface-primary: #434861;
	--surface-secondary: #3c4156;
	--text-primary: #e8eaf0;
	--base-card-foreground: #e8eaf0;

	/* ── Coral brand accents (override base `.dark {}` blue) ── */
	--link: #f9a0a2; /* lightened coral — readable link on dark surfaces */
	--pm-accent: #f9a0a2;
	--pm-accent-hover: #fbbcbe;
	--pm-accent-soft: rgba(247, 138, 140, 0.16);
	--pm-accent-fg: #2e1011;
	--agent-studio-brand-accent: #f78a8c;
	--agent-studio-brand-accent-fg: #2e1011;
	--agent-studio-brand-accent-hover: #f9a0a2;
	--highlight: #f48ab7;
	--highlight-01: rgba(247, 138, 140, 0.16);
	--light-blue-02: rgba(247, 138, 140, 0.14);
	--light-blue-03: rgba(247, 138, 140, 0.18);

	/* ── Primary button stays coral ── */
	--primary-btn-bg: #f78a8c;
	--primary-btn-color: #4a4a4a;
	--primary-btn-bg-hover: #fbbcbe;
	--primary-btn-color-hover: #4a4a4a;

	/* ── Dashboard quick actions → dark cards ── */
	--dashboard-quick-action-bg: #3c4156;
	--dashboard-quick-action-hover-bg: #454a62;
	--dashboard-quick-action-border-color: #424655;
	--dashboard-quick-action-hover-border-color: #4e5370;
	--dashboard-quick-action-wrapper-icon-bg: #454a62;
	--dashboard-quick-action-wrapper-icon-hover-bg: #4e5370;

	/* ── Misc accents → coral ── */
	--item-list-ideas-dropdown-button-color: #f9a0a2;
	--trendmaster-trending-hash-color: #f9a0a2;
	--optimize-dropdown-button-before-bg: linear-gradient(rgba(247, 138, 140, 0.3) 0%, rgba(244, 138, 183, 0.3) 50%, rgba(247, 138, 140, 0.3) 100%);
}

/* Coral active-nav state on the dark-navy sidebar. The base `.dark .host` rule
 * (Sidebar.module.css, 0,2,0) provides light nav text + white active pill for a
 * dark sidebar — we keep its hover/default but recolor only the active item to
 * coral. `html.dark .host` (0,2,1) beats the base rule. */
html.dark .host {
	--with-sidebar-nav-item-color-active: #f9a0a2;
	--with-sidebar-nav-item-color-pressed: #f9a0a2;
	--with-sidebar-nav-item-icon-color-active: #f9a0a2;
	--with-sidebar-nav-item-bg-active: rgba(247, 138, 140, 0.18);
	--with-sidebar-nav-item-bg-pressed: rgba(247, 138, 140, 0.24);
}

/* Flip the legacy `--grey-*` token family to dark within the studio / portal /
 * sidepanel surfaces, mirroring the scoped block in `themes/dark/index.css`.
 * Those primitives (Slider, Card, Alert, Tabs, ActivityFeed…) reference grey
 * tokens that variables.css defines with LIGHT values; without this they render
 * dark text on the dark studio surface — illegible. Scoped (not global) so apps
 * that still hardcode `bg-white` keep their dark text. */
html.dark [data-agent-studio],
html.dark [data-agent-studio] *,
html.dark [data-create-content],
html.dark [data-create-content] *,
html.dark [data-content-library],
html.dark [data-content-library] *,
html.dark [data-sidepanel],
html.dark [data-sidepanel] *,
html.dark [data-radix-popper-content-wrapper],
html.dark [data-radix-popper-content-wrapper] *,
html.dark [data-radix-portal],
html.dark [data-radix-portal] * {
	--grey-06-text: #e8eaf0;
	--grey-05-text: #b0b5c4;
	--grey-04-text: #9da4ba;
	--grey-03-stroke: #565b72;
	--grey-02-stroke: #4a4f65;
	--grey-01-stroke: #424655;
	--grey-08-text: #cdd2dc;
	--grey-07-text: #e8eaf0;
	--grey-00: #2d3142;
	--grey-01: #353a4d;
	--grey-02: #3c4156;
	--grey-03: #565b72;
	--grey-04: #9da4ba;
	--grey-05: #b0b5c4;
	--grey-06: #e8eaf0;
}