/*
 * Wrooms W theme contract.
 *
 * The official Wrooms W is purple-to-blue. This file is intentionally the last
 * visual layer loaded by the client so every public, authenticated, Room,
 * Workspace, Models and Learn surface inherits one product palette. Legacy
 * mint/cyan variable names remain only as compatibility aliases and resolve to
 * Wrooms blue rather than teal.
 */

:root {
  --wrooms-w-door: #07070a;
  --wrooms-w-night: #03040a;
  --wrooms-w-night-2: #070a13;
  --wrooms-w-panel: #0a0e19;
  --wrooms-w-panel-2: #10172a;
  --wrooms-w-violet: #7c3aed;
  --wrooms-w-violet-bright: #8b5cf6;
  --wrooms-w-blue: #2563eb;
  --wrooms-w-blue-bright: #4f7cff;
  --wrooms-w-blue-soft: #9ab5ff;
  --wrooms-w-ice: #eef2ff;
  --wrooms-w-muted: #9aa6c3;
  --wrooms-w-line: rgba(79, 124, 255, .22);
  --wrooms-w-line-hot: rgba(124, 58, 237, .52);
  --wrooms-w-glow-blue: 0 0 28px rgba(37, 99, 235, .2);
  --wrooms-w-glow-violet: 0 0 30px rgba(124, 58, 237, .2);
  --wrooms-w-gradient: linear-gradient(135deg, var(--wrooms-w-violet), var(--wrooms-w-blue));
  --wrooms-w-gradient-soft: linear-gradient(135deg, rgba(124, 58, 237, .24), rgba(37, 99, 235, .22));

  /* Core application theme. */
  --color-bg: var(--wrooms-w-night);
  --color-surface: var(--wrooms-w-night-2);
  --color-elevated: var(--wrooms-w-panel-2);
  --color-fg: var(--wrooms-w-ice);
  --color-muted: var(--wrooms-w-muted);
  --color-subtle: #7581a0;
  --color-border: #1b2440;
  --color-accent: var(--wrooms-w-violet);
  --color-accent-fg: #ffffff;
  --color-signal: var(--wrooms-w-blue-bright);
  --color-ai: var(--wrooms-w-violet-bright);

  /* Navigation stays inside the W gradient instead of using unrelated hues. */
  --color-nav-chat: #4f7cff;
  --color-nav-discover: #7c3aed;
  --color-nav-mail: #5b6cff;
  --color-nav-studio: #8b5cf6;
  --color-nav-docs: #4f7cff;
  --color-nav-repo: #6d5dfc;
  --color-nav-shop: #5f63f2;
  --color-nav-watch: #7b61ff;
  --color-nav-music: #4f7cff;
  --color-nav-home: #6d5dfc;
  --color-nav-browse: #3f6ff4;
  --color-nav-pay: #7c3aed;
  --color-nav-admin: #6d5dfc;
  --color-nav-game: #4f7cff;
  --color-nav-wilds: #8b5cf6;

  --color-brand-violet: var(--wrooms-w-violet);
  --color-brand-blue: var(--wrooms-w-blue);
  --color-brand-mint: var(--wrooms-w-blue-bright);
  --color-brand-door: var(--wrooms-w-door);

  /* Compatibility aliases used by older visual layers. None resolve to teal. */
  --board-door: var(--wrooms-w-door);
  --board-violet: var(--wrooms-w-violet);
  --board-blue: var(--wrooms-w-blue);
  --board-mint: var(--wrooms-w-blue-bright);
  --board-cyan: var(--wrooms-w-blue-bright);
  --board-ink: var(--wrooms-w-ice);
  --board-muted: var(--wrooms-w-muted);
  --board-panel: rgba(10, 14, 25, .92);
  --board-panel-strong: rgba(12, 18, 34, .97);
  --board-line: var(--wrooms-w-line);
  --board-line-strong: rgba(79, 124, 255, .42);
  --board-glow: 0 26px 70px -44px rgba(37, 99, 235, .82);
  --board-edge: inset 0 1px 0 rgba(255,255,255,.055), 0 0 0 1px rgba(79,124,255,.06);

  --prototype-bg: var(--wrooms-w-night);
  --prototype-bg-2: #070b17;
  --prototype-panel: rgba(7, 11, 23, .95);
  --prototype-panel-strong: rgba(9, 14, 29, .98);
  --prototype-cyan: var(--wrooms-w-blue-bright);
  --prototype-cyan-soft: var(--wrooms-w-blue-soft);
  --prototype-line: rgba(79, 124, 255, .34);
  --prototype-line-soft: rgba(79, 124, 255, .17);
  --prototype-text: var(--wrooms-w-ice);
  --prototype-muted: var(--wrooms-w-muted);

  --lr-bg: var(--wrooms-w-night);
  --lr-panel: rgba(8, 12, 25, .95);
  --lr-panel-2: rgba(11, 17, 34, .97);
  --lr-line: rgba(79, 124, 255, .36);
  --lr-line-soft: rgba(79, 124, 255, .18);
  --lr-cyan: var(--wrooms-w-blue-bright);
  --lr-cyan-soft: var(--wrooms-w-blue-soft);
  --lr-text: var(--wrooms-w-ice);
  --lr-muted: var(--wrooms-w-muted);
  --lr-dim: #7887a9;

  --ws-violet: var(--wrooms-w-violet);
  --ws-blue: var(--wrooms-w-blue);
  --ws-mint: var(--wrooms-w-blue-bright);
  --ws-black: var(--wrooms-w-door);
  --ws-coal: #0a0a10;
  --ws-panel: var(--wrooms-w-panel);
  --ws-panel-2: var(--wrooms-w-panel-2);
  --ws-text: var(--wrooms-w-ice);
  --ws-muted: var(--wrooms-w-muted);
  --ws-subtle: #757f99;

  --door-violet: var(--wrooms-w-violet);
  --door-blue: var(--wrooms-w-blue);
  --door-mint: var(--wrooms-w-blue-bright);
  --nf-violet: var(--wrooms-w-violet-bright);
  --nf-blue: var(--wrooms-w-blue-bright);
  --nf-cyan: var(--wrooms-w-blue-bright);
  --nf-line-hot: rgba(79, 124, 255, .34);
}

html[data-sky="day"] {
  --color-bg: #f4f5fa;
  --color-surface: #ffffff;
  --color-elevated: #eceffd;
  --color-fg: #171927;
  --color-muted: #59627d;
  --color-subtle: #707a96;
  --color-border: #d9dff2;
  --color-accent: #6d28d9;
  --color-accent-fg: #ffffff;
  --color-signal: #1d4ed8;
  --color-ai: #7c3aed;
  --color-nav-chat: #1d4ed8;
  --color-nav-discover: #6d28d9;
  --color-nav-mail: #4338ca;
  --color-nav-studio: #7c3aed;
  --color-nav-docs: #2563eb;
  --color-nav-repo: #4f46e5;
  --color-nav-shop: #5b4bd8;
  --color-nav-watch: #6d28d9;
  --color-nav-music: #2563eb;
  --color-nav-home: #4f46e5;
  --color-nav-browse: #1d4ed8;
  --color-nav-pay: #6d28d9;
  --color-nav-admin: #4f46e5;
  --color-nav-game: #2563eb;
  --color-nav-wilds: #7c3aed;
  --dock-active: rgba(79, 70, 229, .08);
  --rail-thumb: linear-gradient(180deg, #7c3aed, #2563eb);
  --rail-thumb-hot: #4f46e5;
  --rail-glow: rgba(37, 99, 235, .16);
}

::selection {
  color: #fff;
  background: rgba(124, 58, 237, .5);
}

body {
  background:
    radial-gradient(58rem 40rem at 88% -10%, rgba(37, 99, 235, .18), transparent 62%),
    radial-gradient(52rem 38rem at 8% 2%, rgba(124, 58, 237, .18), transparent 64%),
    linear-gradient(180deg, var(--wrooms-w-door), var(--wrooms-w-night) 55%, #05050a) !important;
}

/* Public/product shell. */
[data-wrooms-surface="public"],
.prototype-public,
.wrooms-workspace-app,
.app-shell.rock-shell {
  --color-accent: var(--wrooms-w-violet);
  --color-signal: var(--wrooms-w-blue-bright);
  --color-ai: var(--wrooms-w-violet-bright);
}

[data-wrooms-surface="public"],
.prototype-public {
  background:
    linear-gradient(rgba(79,124,255,.014) 1px, transparent 1px) 0 0 / 100% 48px,
    radial-gradient(55rem 34rem at 82% 0%, rgba(37,99,235,.13), transparent 66%),
    radial-gradient(48rem 32rem at 12% 10%, rgba(124,58,237,.14), transparent 68%),
    var(--wrooms-w-night) !important;
}

[data-wrooms-surface="public"] > div > header,
.prototype-public-header,
.prototype-public[data-wrooms-surface="public"] > div > header {
  border-bottom-color: rgba(79,124,255,.24) !important;
  background: linear-gradient(180deg, rgba(6,7,13,.985), rgba(8,10,20,.96)) !important;
  box-shadow: 0 14px 38px rgba(0,0,0,.34), inset 0 -1px rgba(124,58,237,.07) !important;
}

[data-wrooms-surface="public"] .wrooms-site-nav,
.prototype-public-search,
.prototype-public-menu,
.prototype-public-menu__search {
  border-color: rgba(79,124,255,.2) !important;
  background: rgba(9,12,24,.9) !important;
}

[data-wrooms-surface="public"] .wrooms-site-nav > a[aria-current="page"],
[data-wrooms-surface="public"] .wrooms-site-nav > a[data-active="true"],
.prototype-public-nav__link[data-active="true"],
.prototype-public-menu__link.is-active {
  color: #fff !important;
  border-color: rgba(79,124,255,.62) !important;
  background: var(--wrooms-w-gradient-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.26), var(--wrooms-w-glow-blue) !important;
}

.prototype-public-nav__link,
.prototype-public-nav__link:last-child {
  border-color: rgba(79,124,255,.08) !important;
}

.prototype-public-nav__link:hover,
.prototype-public-tool:hover,
.prototype-public-menu-toggle:hover {
  border-color: rgba(124,58,237,.3) !important;
  background: rgba(124,58,237,.07) !important;
}

.prototype-public-nav__link[data-active="true"]::after {
  background: linear-gradient(90deg, var(--wrooms-w-violet-bright), var(--wrooms-w-blue-bright)) !important;
  box-shadow: 0 0 10px rgba(79,124,255,.56) !important;
}

.prototype-public-brand__word img {
  filter: drop-shadow(0 0 8px rgba(124,58,237,.42)) drop-shadow(0 0 12px rgba(37,99,235,.22)) !important;
}

.prototype-public-brand__tag,
.prototype-public-nav__link[data-active="true"] .prototype-public-nav__glyph,
.prototype-public-menu__brand > span:last-child {
  color: var(--wrooms-w-blue-bright) !important;
}

.prototype-public-avatar {
  border-color: rgba(124,58,237,.5) !important;
  background: radial-gradient(circle at 36% 28%, rgba(124,58,237,.42), rgba(37,99,235,.17) 50%, #090c18 76%) !important;
  box-shadow: 0 0 13px rgba(37,99,235,.2), inset 0 0 0 2px rgba(7,7,10,.82) !important;
}

.prototype-public-menu__account,
.prototype-public .learn-reference-primary,
.prototype-public .learn-reference-explore {
  border-color: rgba(79,124,255,.72) !important;
  background: linear-gradient(135deg, #7c3aed, #2563eb) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(37,99,235,.24), inset 0 1px rgba(255,255,255,.22) !important;
}

/* Learn uses the same W gradient, including the portal artwork and dense board. */
.prototype-public [data-public-path="/history"],
.learn-reference {
  color: var(--wrooms-w-ice) !important;
  background:
    radial-gradient(65rem 34rem at 75% 0%, rgba(37,99,235,.11), transparent 60%),
    radial-gradient(52rem 30rem at 15% 8%, rgba(124,58,237,.12), transparent 64%),
    linear-gradient(180deg,#05060d,#080b17 55%,#05060d) !important;
}

.prototype-public .learn-reference-hero {
  border-bottom-color: rgba(79,124,255,.24) !important;
  background:
    linear-gradient(90deg, rgba(5,6,13,.98) 0%, rgba(6,7,16,.9) 31%, rgba(5,6,13,.2) 58%, rgba(5,6,13,.02) 100%),
    url('/wrooms-learn-hero-portal.svg') right center / auto 100% no-repeat,
    radial-gradient(circle at 68% 18%, rgba(37,99,235,.2), transparent 24rem),
    radial-gradient(circle at 15% 15%, rgba(124,58,237,.16), transparent 24rem),
    linear-gradient(118deg,#060710,#0a1024 62%,#05060d) !important;
}

.prototype-public .learn-reference-hero::before {
  background:
    linear-gradient(90deg, transparent 0 63.9%, rgba(79,124,255,.14) 64.1%, transparent 64.4%),
    radial-gradient(circle at 88% 20%,rgba(255,255,255,.34) 0 1px,transparent 1.5px) 0 0/62px 46px !important;
}

.prototype-public .learn-reference-hero h1 {
  background: linear-gradient(180deg,#fff 0%,#dfe6ff 48%,#8eaaff 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  filter: drop-shadow(0 4px 0 rgba(37,99,235,.16)) !important;
}

.prototype-public .learn-reference-kicker,
.prototype-public .learn-reference-statbar strong,
.prototype-public .learn-reference-panel > header h2 svg,
.prototype-public .learn-reference-panel > header > span,
.prototype-public .learn-reference-panel > header > a,
.prototype-public .learn-reference-door span,
.prototype-public .learn-reference-vertical,
.prototype-public .learn-reference-model > svg,
.prototype-public .learn-reference-photo span,
.prototype-public .learn-ref-mark--text {
  color: var(--wrooms-w-blue-bright) !important;
}

.prototype-public .learn-reference-panel,
.prototype-public .learn-reference-labcard,
.prototype-public .learn-reference-person,
.prototype-public .learn-reference-model,
.prototype-public .learn-reference-video-card,
.prototype-public .learn-reference-xcards > a,
.prototype-public .learn-reference-newslist > *,
.prototype-public .learn-reference-sourcegrid > a,
.prototype-public .learn-person-card {
  border-color: rgba(79,124,255,.18) !important;
  background: linear-gradient(180deg, rgba(13,18,36,.97), rgba(7,10,21,.98)) !important;
}

.prototype-public .learn-reference-labcard:hover,
.prototype-public .learn-reference-labcard.is-active,
.prototype-public .learn-reference-person:hover,
.prototype-public .learn-reference-model:hover,
.prototype-public .learn-reference-sourcegrid > a:hover,
.prototype-public .learn-person-card:hover {
  border-color: rgba(124,58,237,.58) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 0 18px rgba(37,99,235,.16) !important;
}

.prototype-public .learn-reference-door {
  border-color: rgba(79,124,255,.78) !important;
  box-shadow: 0 0 24px rgba(37,99,235,.25), inset 0 0 30px rgba(124,58,237,.1) !important;
}

.prototype-public .learn-reference-door::before {
  border-color: rgba(139,92,246,.35) !important;
}

.prototype-public .learn-reference-statbar,
.prototype-public .learn-reference-search {
  border-color: rgba(79,124,255,.18) !important;
  background: rgba(8,12,25,.82) !important;
}

.prototype-public .learn-reference-timeline ol::before {
  background: linear-gradient(90deg,#7c3aed,#8b5cf6,#4f7cff,#2563eb) !important;
  box-shadow: 0 0 11px rgba(37,99,235,.4) !important;
}

.prototype-public .learn-reference-timeline li i {
  border-color: #a7baff !important;
  background: #4f7cff !important;
  box-shadow: 0 0 9px rgba(37,99,235,.58) !important;
}

/* Authenticated shell and Room share exactly the same W signal language. */
.app-shell.rock-shell {
  background:
    radial-gradient(66rem 34rem at 74% -16%, rgba(37,99,235,.16), transparent 62%),
    radial-gradient(54rem 32rem at 8% -4%, rgba(124,58,237,.15), transparent 66%),
    linear-gradient(180deg,#05060c,#080b15 48%,#05060c) !important;
}

.app-shell.rock-shell::before {
  background:
    linear-gradient(rgba(79,124,255,.018) 1px, transparent 1px) 0 0 / 100% 44px,
    linear-gradient(90deg, rgba(124,58,237,.012) 1px, transparent 1px) 0 0 / 72px 100% !important;
}

.app-shell.rock-shell .rock-rail,
.app-shell.rock-shell .rock-topbar,
.app-shell.rock-shell .wrooms-floor {
  border-color: rgba(79,124,255,.18) !important;
  background: rgba(7,9,18,.95) !important;
}

.app-shell.rock-shell .rock-stage {
  background:
    radial-gradient(44rem 30rem at 50% 0%, rgba(37,99,235,.08), transparent 68%),
    linear-gradient(rgba(79,124,255,.012) 1px, transparent 1px) 0 0 / 100% 48px,
    #080b16 !important;
}

.app-shell.rock-shell .rock-rail .nav-tab:hover {
  border-color: rgba(124,58,237,.3) !important;
  color: #fff !important;
  background: rgba(124,58,237,.08) !important;
}

.app-shell.rock-shell .rock-rail .nav-tab[aria-current="page"] {
  color: #fff !important;
  border-color: rgba(79,124,255,.64) !important;
  background: var(--wrooms-w-gradient-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(139,92,246,.18), 0 0 21px rgba(37,99,235,.2) !important;
}

.app-shell.rock-shell .rock-topbar::after,
.app-shell.rock-shell .section-label {
  color: var(--wrooms-w-blue-bright) !important;
}

.app-shell.rock-shell input,
.app-shell.rock-shell textarea,
.wrooms-workspace-app input,
.wrooms-workspace-app textarea {
  caret-color: var(--wrooms-w-blue-bright) !important;
}

/* Workspace is visually identical to Room, while preserving its panel layout. */
.wrooms-workspace-app {
  background:
    radial-gradient(circle at 16% -15%, rgba(124,58,237,.2), transparent 34rem),
    radial-gradient(circle at 84% -12%, rgba(37,99,235,.18), transparent 32rem),
    linear-gradient(rgba(79,124,255,.014) 1px, transparent 1px) 0 0 / 100% 48px,
    var(--wrooms-w-door) !important;
}

.wrooms-workspace-app::before {
  background:
    linear-gradient(90deg, transparent 0 63px, rgba(79,124,255,.022) 64px, transparent 65px) 0 0 / 256px 100%,
    linear-gradient(120deg, transparent 0 48%, rgba(124,58,237,.045) 49%, transparent 50%) !important;
}

.wrooms-workspace-app .workspace-commandbar,
.wrooms-workspace-app[data-board-ui="true"] .workspace-commandbar {
  border-bottom-color: rgba(79,124,255,.2) !important;
  background: linear-gradient(90deg, rgba(124,58,237,.1), transparent 27%, transparent 73%, rgba(37,99,235,.1)), rgba(7,7,10,.96) !important;
}

.wrooms-workspace-app .workspace-commandbar::after {
  background: linear-gradient(90deg, transparent, #7c3aed 27%, #8b5cf6 45%, #4f7cff 68%, #2563eb 86%, transparent) !important;
}

.workspace-ai-picker:focus-within,
.wrooms-workspace-app button:focus-visible,
.wrooms-workspace-app a:focus-visible,
.app-shell.rock-shell button:focus-visible,
.app-shell.rock-shell a:focus-visible,
.prototype-public button:focus-visible,
.prototype-public a:focus-visible,
.prototype-public input:focus-visible {
  border-color: rgba(79,124,255,.52) !important;
  outline-color: var(--wrooms-w-blue-bright) !important;
  box-shadow: 0 0 0 2px rgba(124,58,237,.14), 0 0 18px rgba(37,99,235,.12) !important;
}

.ai-proof-strip,
.ai-proof-strip svg {
  color: var(--wrooms-w-blue-bright) !important;
}

button.ai-mode-card:hover {
  border-color: rgba(124,58,237,.42) !important;
  box-shadow: 0 28px 74px rgba(0,0,0,.28), 0 0 38px rgba(37,99,235,.12) !important;
}

/* Scrollbars, rails and small system chrome use W colors too. */
:root {
  --rail-thumb: linear-gradient(180deg, var(--wrooms-w-violet-bright), var(--wrooms-w-blue-bright));
  --rail-thumb-hot: var(--wrooms-w-blue-bright);
  --rail-glow: rgba(37,99,235,.22);
  --rail-rest: rgba(79,124,255,.28);
  --rail-live: var(--wrooms-w-blue-bright);
}

.wrooms-rail-thumb {
  background: linear-gradient(180deg, var(--wrooms-w-violet-bright), var(--wrooms-w-blue-bright)) !important;
}

@media (max-width: 1120px) {
  .prototype-public .learn-reference-hero {
    background:
      linear-gradient(180deg,rgba(5,6,13,.92) 0%,rgba(6,7,16,.78) 40%,rgba(5,6,13,.12) 100%),
      url('/wrooms-learn-hero-portal.svg') 62% bottom / auto 72% no-repeat,
      #070a15 !important;
  }
}

@media (max-width: 760px) {
  .prototype-public .learn-reference-hero {
    background:
      linear-gradient(180deg,rgba(5,6,13,.96) 0%,rgba(6,7,16,.84) 48%,rgba(5,6,13,.18) 100%),
      url('/wrooms-learn-hero-portal.svg') 56% bottom / auto 58% no-repeat,
      #070a15 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}