/* innet.one — Mood palettes 2025–2026 (plum / mocha / cloud)
 * Legacy tech/warm/deep → css/mood-legacy.css
 */

/* ——— Plum Noir (Pinterest 2026) ——— */

[data-theme="light"][data-mood="plum"] {
  --bg: #f5f8fa;
  --bg-subtle: #e8f0f5;
  --surface: #ffffff;
  --surface-muted: #f0f4f8;
  --text: #1a1a2e;
  --text-muted: #454560;
  --border: #9ecae8;
  --border-subtle: #c5e3f5;
  --accent: #351e28;
  --accent-hover: #4a2a3a;
  --accent-muted: #6d4a5a;
  --accent-pop: #22d3ee;
  --accent-pop-hover: #06b6d4;
  --focus: #351e28;
  --orange: #e9f056;
  --orange-hover: #d4d83a;
  --success: #aeb8a0;
  --danger: #e95a3a;
  --locked: #8a8a9a;
  --locked-text: #5a5a6a;
  --on-accent: #ffffff;
  --glow-warm: color-mix(in srgb, #351e28 14%, transparent);
  --glow-cool: color-mix(in srgb, #d7efff 10%, transparent);
}

[data-theme="dark"][data-mood="plum"] {
  --bg: #0f0f14;
  --bg-subtle: #1a1a24;
  --surface: #24243a;
  --surface-muted: #1a1a2e;
  --text: #f5f5fa;
  --text-muted: #b8b8d0;
  --border: #4a4a68;
  --border-subtle: #35354e;
  --accent: #a78bfa;
  --accent-hover: #8b6ffa;
  --accent-muted: #c4b5fd;
  --accent-pop: #e9f056;
  --accent-pop-hover: #d4d83a;
  --focus: #a78bfa;
  --orange: #e9f056;
  --orange-hover: #d4d83a;
  --success: #aeb8a0;
  --danger: #f87171;
  --locked: #6a6a8a;
  --locked-text: #9a9ab0;
  --on-accent: #1a1a2e;
  --glow-warm: color-mix(in srgb, #a78bfa 16%, transparent);
  --glow-cool: color-mix(in srgb, #d7efff 10%, transparent);
}

/* ——— Mocha Mousse (Pantone 2025) ——— */

[data-theme="light"][data-mood="mocha"] {
  --bg: #f9f6f0;
  --bg-subtle: #f2ede5;
  --surface: #fffcf7;
  --surface-muted: #f5f0e8;
  --text: #2d231d;
  --text-muted: #564a42;
  --border: #c4b5a5;
  --border-subtle: #ddd0c4;
  --accent: #a47864;
  --accent-hover: #8f6a5a;
  --accent-muted: #8f6554;
  --accent-pop: #2d6a4f;
  --accent-pop-hover: #1b4332;
  --focus: #a47864;
  --orange: #d4a03a;
  --orange-hover: #b8892a;
  --success: #7a8b6e;
  --danger: #b23a2a;
  --locked: #8a7a6a;
  --locked-text: #6a5a4a;
  --on-accent: #ffffff;
  --glow-warm: color-mix(in srgb, #a47864 14%, transparent);
  --glow-cool: color-mix(in srgb, #d9cec2 10%, transparent);
}

[data-theme="dark"][data-mood="mocha"] {
  --bg: #1a1410;
  --bg-subtle: #261f1a;
  --surface: #3d322c;
  --surface-muted: #2e2620;
  --text: #f0ece4;
  --text-muted: #c4b0a0;
  --border: #5c4f44;
  --border-subtle: #453a32;
  --accent: #b8907a;
  --accent-hover: #a47a64;
  --accent-muted: #cdafa0;
  --accent-pop: #f4c95d;
  --accent-pop-hover: #e8b84a;
  --focus: #b8907a;
  --orange: #d4a03a;
  --orange-hover: #b8892a;
  --success: #aeb8a0;
  --danger: #f87171;
  --locked: #6a5a4a;
  --locked-text: #9a8a7a;
  --on-accent: #1a1410;
  --glow-warm: color-mix(in srgb, #b8907a 16%, transparent);
  --glow-cool: color-mix(in srgb, #4d423a 10%, transparent);
}

/* ——— Cloud Dancer (Pantone 2026) = Figma Facade 6:2 ——— */

[data-theme="light"][data-mood="cloud"],
[data-theme="light"]:not([data-mood]) {
  --bg: #f0eee9;
  --bg-subtle: #e8e5e0;
  --surface: #fcfaf5;
  --surface-muted: #f5f2ec;
  --text: #2a2a2a;
  --text-muted: #5c574f;
  --border: #b8b0a4;
  --border-subtle: #d0c8bc;
  --accent: #7a665e;
  --accent-hover: #6b5851;
  --accent-muted: #9a8880;
  --accent-pop: #5b8fb9;
  --accent-pop-hover: #3d6f99;
  --focus: #7a665e;
  --orange: #d4a67a;
  --orange-hover: #b88a5a;
  --success: #8a9ba8;
  --danger: #c45a4a;
  --locked: #9a8a8a;
  --locked-text: #6a5a5a;
  --on-accent: #ffffff;
  --glow-warm: color-mix(in srgb, #b8a6a0 14%, transparent);
  --glow-cool: color-mix(in srgb, #d4d0c8 10%, transparent);
}

[data-theme="dark"][data-mood="cloud"],
[data-theme="dark"]:not([data-mood]) {
  --bg: #121212;
  --bg-subtle: #1a1a1a;
  --surface: #2a2a2a;
  --surface-muted: #1e1e1e;
  --text: #f5f5f0;
  --text-muted: #b8b8b0;
  --border: #484848;
  --border-subtle: #363636;
  --accent: #c4b0a8;
  --accent-hover: #a89890;
  --accent-muted: #d8c8c0;
  --accent-pop: #e8b88a;
  --accent-pop-hover: #d4a070;
  --focus: #b8a6a0;
  --orange: #d4a67a;
  --orange-hover: #b88a5a;
  --success: #8a9ba8;
  --danger: #f87171;
  --locked: #6a5a5a;
  --locked-text: #9a8a8a;
  --on-accent: #121212;
  --glow-warm: color-mix(in srgb, #b8a6a0 16%, transparent);
  --glow-cool: color-mix(in srgb, #3a3a3a 10%, transparent);
}

/* Fallback light — Figma Facade (cloud); mood blocks override */

[data-theme="light"] {
  --bg: #f0eee9;
  --bg-subtle: #e8e5e0;
  --surface: #fcfaf5;
  --surface-muted: #f5f2ec;
  --text: #2a2a2a;
  --text-muted: #5c574f;
  --border: #b8b0a4;
  --border-subtle: #d0c8bc;
  --accent: #7a665e;
  --accent-hover: #6b5851;
  --accent-muted: #9a8880;
  --accent-pop: #5b8fb9;
  --accent-pop-hover: #3d6f99;
  --focus: #7a665e;
  --orange: #d4a67a;
  --orange-hover: #b88a5a;
  --success: #8a9ba8;
  --danger: #c45a4a;
  --locked: #9a8a8a;
  --locked-text: #6a5a5a;
  --on-accent: #ffffff;
  --glow-warm: color-mix(in srgb, #b8a6a0 14%, transparent);
  --glow-cool: color-mix(in srgb, #d4d0c8 10%, transparent);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
  }
}

/* Ambient layers — positions drift via js/ambient.js (~60s smooth) */

:root {
  --ambient-warm-x: 8%;
  --ambient-warm-y: -5%;
  --ambient-cool-x: 92%;
  --ambient-cool-y: 5%;
  --ambient-warm-size: 70%;
  --ambient-opacity: 0.28;
  --ambient-warm-mix: 0.14;
  --ambient-cool-mix: 0.1;
  --ambient-transition: 60s;
}

#app-shell::before {
  transition:
    opacity var(--ambient-transition) ease,
    background var(--ambient-transition) ease;
}

[data-theme="light"] #app-shell::before {
  background:
    radial-gradient(
      ellipse var(--ambient-warm-size) 45% at var(--ambient-warm-x) var(--ambient-warm-y),
      color-mix(in srgb, var(--glow-warm) calc(var(--ambient-warm-mix) * 100%), transparent),
      transparent 50%
    ),
    radial-gradient(
      ellipse 55% 35% at var(--ambient-cool-x) var(--ambient-cool-y),
      color-mix(in srgb, var(--glow-cool) calc(var(--ambient-cool-mix) * 100%), transparent),
      transparent 45%
    ),
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  opacity: var(--ambient-opacity);
}

[data-theme="dark"] #app-shell::before {
  background:
    radial-gradient(
      ellipse var(--ambient-warm-size) 50% at var(--ambient-warm-x) var(--ambient-warm-y),
      color-mix(in srgb, var(--glow-warm) calc(var(--ambient-warm-mix) * 100%), transparent),
      transparent 55%
    ),
    radial-gradient(
      ellipse 60% 40% at var(--ambient-cool-x) var(--ambient-cool-y),
      color-mix(in srgb, var(--glow-cool) calc(var(--ambient-cool-mix) * 100%), transparent),
      transparent 50%
    ),
    linear-gradient(var(--border-subtle) 1px, transparent 1px),
    linear-gradient(90deg, var(--border-subtle) 1px, transparent 1px);
  opacity: calc(var(--ambient-opacity) + 0.12);
}

@media (prefers-reduced-motion: reduce) {
  #app-shell::before {
    transition: none;
  }

  .mood-switch__dot {
    transition: none;
  }
}

/* Mood switcher */

.mood-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.25rem;
  min-height: 2.25rem;
  padding: 0;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.header-tools__display .mood-switch {
  border: none;
  background: transparent;
  min-width: 2rem;
  min-height: 2rem;
}

.header-tools__display .mood-switch:hover {
  background: color-mix(in srgb, var(--border-subtle) 25%, transparent);
  border: none;
}

.header-tools__display .mood-switch__dot {
  opacity: 0.8;
}

.mood-switch:hover {
  color: var(--text);
  border-color: var(--accent-muted);
}

.mood-switch__dot {
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent);
  flex-shrink: 0;
}

.mood-switch[data-mood="plum"] .mood-switch__dot,
[data-mood="plum"] .mood-switch__dot,
[data-theme="dark"]:not([data-mood]) .mood-switch__dot {
  background: linear-gradient(135deg, #a78bfa 50%, #e9f056 50%);
}

[data-theme="light"] .mood-switch[data-mood="plum"] .mood-switch__dot,
[data-theme="light"][data-mood="plum"] .mood-switch__dot,
[data-theme="light"]:not([data-mood]) .mood-switch__dot {
  background: linear-gradient(135deg, #351e28 50%, #22d3ee 50%);
}

.mood-switch[data-mood="mocha"] .mood-switch__dot,
[data-mood="mocha"] .mood-switch__dot {
  background: linear-gradient(135deg, #b8907a 50%, #f4c95d 50%);
}

[data-theme="light"] .mood-switch[data-mood="mocha"] .mood-switch__dot,
[data-theme="light"][data-mood="mocha"] .mood-switch__dot {
  background: linear-gradient(135deg, #a47864 50%, #2d6a4f 50%);
}

.mood-switch[data-mood="cloud"] .mood-switch__dot,
[data-mood="cloud"] .mood-switch__dot {
  background: linear-gradient(135deg, #c4b0a8 50%, #e8b88a 50%);
}

[data-theme="light"] .mood-switch[data-mood="cloud"] .mood-switch__dot,
[data-theme="light"][data-mood="cloud"] .mood-switch__dot {
  background: linear-gradient(135deg, #5b8fb9 50%, #d0c8bc 50%);
}

@media (forced-colors: active) {
  .mood-switch__dot {
    background: ButtonText;
    box-shadow: none;
  }
}