/*
  Elevise light brand skin.
  This intentionally overrides the older cosmos/dark Tailwind palette while
  leaving the page structure and all JavaScript behaviour untouched.
*/

:root {
  color-scheme: light;
  --ev-bg: #ffffff;
  --ev-bg-soft: #f5efff;
  --ev-surface: rgba(255, 255, 255, 0.86);
  --ev-surface-solid: #ffffff;
  --ev-surface-muted: #f1f4f9;
  --ev-text: #171717;
  --ev-muted: #647084;
  --ev-line: rgba(15, 23, 42, 0.11);
  --ev-line-strong: rgba(15, 23, 42, 0.18);
  --ev-brand: #1f2937;
  --ev-purple: #6d28d9;
  --ev-purple-strong: #4c1d95;
  --ev-purple-soft: #f0e7ff;
  --ev-success: #7c3aed;
  --ev-danger: #dc2626;
}

html,
body {
  font-family: "Google Sans", "DM Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: #ffffff !important;
  color: var(--ev-text) !important;
}

body::before {
  content: none !important;
}

body > .fixed.inset-0.pointer-events-none,
body > .fixed.top-0.left-0.w-full.h-full.pointer-events-none,
section .absolute.inset-0.z-0,
.absolute[class*="blur-"][class*="rounded-full"],
.absolute[class*="blur-"][class*="bg-primary"],
.absolute[class*="blur-"][class*="bg-secondary"],
.absolute[class*="blur-"][class*="bg-tertiary"] {
  display: none !important;
}

.font-code,
.font-body-md,
.font-body-lg,
.font-label-md,
.font-h1,
.font-h2,
.font-h3 {
  font-family: "Google Sans", "DM Sans", system-ui, sans-serif !important;
}

.tracking-tighter,
.tracking-tight,
.text-h1,
.text-h2,
.text-h3,
.text-label-md {
  letter-spacing: 0 !important;
}

.text-h1 {
  font-size: 42px !important;
  line-height: 1.08 !important;
}

.text-h2 {
  font-size: 30px !important;
  line-height: 1.15 !important;
}

.text-h3 {
  font-size: 22px !important;
  line-height: 1.25 !important;
}

@media (max-width: 640px) {
  .text-h1 {
    font-size: 34px !important;
  }

  .text-h2 {
    font-size: 26px !important;
  }

  .text-h3 {
    font-size: 20px !important;
  }
}

.elevise-brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.elevise-logo {
  width: 172px;
  height: 42px;
  object-fit: cover;
  object-position: center;
  display: block;
  mix-blend-mode: multiply;
}

footer .elevise-logo,
.elevise-logo-sm {
  width: 136px;
  height: 34px;
}

/* Semantic palette overrides */
.bg-background,
.bg-surface,
.bg-surface-container-lowest,
.bg-surface-container-lowest\/80,
.bg-surface-container-lowest\/95 {
  background: transparent !important;
}

.bg-surface-container,
.bg-surface-container\/20,
.bg-surface-container\/30,
.bg-surface-container\/40,
.bg-surface-container\/50,
.bg-surface-container\/60,
.bg-surface-container\/80,
.bg-surface-container-low,
.bg-surface-container-high,
.bg-surface-container-highest,
.bg-surface-bright,
.bg-surface-variant,
.bg-surface-variant\/30,
.bg-surface-variant\/50,
.bg-surface-dim,
.bg-white\/5,
.bg-white\/10 {
  background-color: var(--ev-surface) !important;
}

.bg-surface-container-highest,
input,
textarea,
select {
  background-color: var(--ev-surface-solid) !important;
}

.bg-black\/20,
[class~="bg-white/[0.03]"] {
  background-color: var(--ev-surface) !important;
}

.text-on-surface,
.text-on-background,
.text-inverse-on-surface {
  color: var(--ev-text) !important;
}

.text-on-surface-variant,
.text-on-surface-variant\/50,
.text-outline {
  color: var(--ev-muted) !important;
}

.text-primary,
.text-secondary,
.text-tertiary,
.text-primary-fixed-dim,
.text-on-primary-fixed,
.group:hover .group-hover\:text-primary {
  color: var(--ev-purple) !important;
}

.text-error {
  color: var(--ev-danger) !important;
}

.text-on-primary,
.text-on-primary-container,
.text-white {
  color: #ffffff !important;
}

.border-white\/5,
.border-white\/10,
.border-white\/20,
.border-primary\/20,
.border-primary\/30,
.border-primary\/40,
.border-primary\/50,
.border-tertiary\/20,
.border-tertiary\/30,
.border-transparent {
  border-color: var(--ev-line) !important;
}

.hover\:border-white\/20:hover,
.hover\:border-white\/30:hover,
.hover\:border-primary\/30:hover,
.hover\:border-primary\/40:hover,
.hover\:border-primary\/50:hover,
.group:hover .group-hover\:border-primary\/40 {
  border-color: var(--ev-line-strong) !important;
}

.bg-primary,
.bg-primary-container,
.bg-primary-container\/10,
.bg-primary-container\/20,
.bg-primary-container\/30,
.bg-primary-container\/40,
.bg-tertiary,
.bg-tertiary-fixed-dim,
.hover\:bg-primary-container\/40:hover {
  background-color: var(--ev-purple) !important;
}

.bg-primary\/5,
.bg-primary\/10,
.bg-primary\/20,
.hover\:bg-primary\/10:hover,
.hover\:bg-primary\/20:hover,
.hover\:bg-tertiary-container\/40:hover {
  background-color: var(--ev-purple-soft) !important;
}

.bg-secondary-container,
.bg-secondary-container\/10,
.bg-secondary-container\/20,
.bg-tertiary-container,
.bg-tertiary-container\/5,
.bg-tertiary-container\/10,
.bg-tertiary-container\/20 {
  background-color: var(--ev-purple-soft) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-b,
.bg-gradient-to-br,
.bg-gradient-to-bl,
.bg-gradient-to-t,
.bg-gradient-to-l {
  background-image: none !important;
  background-color: var(--ev-purple) !important;
}

.from-primary-container,
.via-secondary-container,
.via-tertiary,
.to-secondary-container,
.to-primary-container,
.from-primary,
.to-tertiary,
.from-transparent,
.to-transparent {
  --tw-gradient-from: var(--ev-purple) var(--tw-gradient-from-position) !important;
  --tw-gradient-via: var(--ev-purple) var(--tw-gradient-via-position) !important;
  --tw-gradient-to: var(--ev-purple) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: var(--ev-purple), var(--ev-purple) !important;
}

.text-transparent.bg-clip-text {
  color: var(--ev-purple) !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
}

nav {
  background-color: rgba(255, 255, 255, 0.88) !important;
  border-color: var(--ev-line) !important;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.08);
}

header {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border-color: var(--ev-line) !important;
}

[class*="backdrop-blur"] {
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}

[class*="shadow-"] {
  box-shadow: 0 18px 52px rgba(15, 23, 42, 0.08) !important;
}

button,
a,
input,
textarea,
select,
.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: 18px !important;
}

button,
a[href] {
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease, box-shadow 180ms ease !important;
}

button:hover,
a[href]:hover {
  transform: translateY(-1px);
}

input,
textarea,
select {
  color: var(--ev-text) !important;
  border-color: var(--ev-line) !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.03);
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ev-purple) !important;
  box-shadow: 0 0 0 4px rgba(109, 40, 217, 0.12) !important;
}

.material-symbols-outlined {
  color: currentColor;
}

.prose-chat strong,
.prose-chat h1,
.prose-chat h2,
.prose-chat h3 {
  color: var(--ev-text) !important;
}

.drag-over {
  border-color: var(--ev-purple) !important;
  background: var(--ev-purple-soft) !important;
}

.prose-chat code,
.prose-chat pre {
  background: #f3f5f9 !important;
  border-color: var(--ev-line) !important;
  color: var(--ev-text) !important;
}

::-webkit-scrollbar-thumb {
  background: rgba(15, 23, 42, 0.18) !important;
}

@media (max-width: 768px) {
  .elevise-logo {
    width: 140px;
    height: 34px;
  }
}

/* ── Dark Mode ──────────────────────────────────────────────────────────────── */
html[data-theme="dark"] {
  color-scheme: dark;
  --ev-bg: #1e1e1e;
  --ev-bg-soft: #252525;
  --ev-surface: rgba(42, 42, 42, 0.88);
  --ev-surface-solid: #2a2a2a;
  --ev-surface-muted: #333333;
  --ev-text: #f0f0f0;
  --ev-muted: #9a9a9a;
  --ev-line: rgba(255, 255, 255, 0.1);
  --ev-line-strong: rgba(255, 255, 255, 0.18);
  --ev-purple-soft: rgba(109, 40, 217, 0.25);
}

html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #1e1e1e !important;
  color: #f0f0f0 !important;
}

html[data-theme="dark"] nav {
  background-color: rgba(28, 28, 28, 0.92) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] header {
  background-color: rgba(28, 28, 28, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Landing page shell */
html[data-theme="dark"] .landing-shell {
  background: #1e1e1e;
  color: #f0f0f0;
}

html[data-theme="dark"] .hero-title {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .hero-copy {
  color: #b8b8b8 !important;
}

html[data-theme="dark"] .soft-tag {
  background: #2a1f45;
  color: #c4a8ff;
  border-color: #3d2e6e;
}

html[data-theme="dark"] .subject-pill {
  background: #2a2a2a;
  border-color: #3a3a3a;
  color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .secondary-cta {
  color: #f0f0f0;
}

html[data-theme="dark"] .tablet-screen {
  background: #2a2a2a;
  color: #f0f0f0;
}

html[data-theme="dark"] .app-preview-shell {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.3);
}

html[data-theme="dark"] .mini-sidebar {
  background: #202020;
  border-color: #3a3a3a;
}

html[data-theme="dark"] .preview-line {
  background: #3a3a3a;
}

html[data-theme="dark"] .preview-card {
  background: #2a2a2a !important;
  border-color: #3a3a3a !important;
  color: #f0f0f0;
}

html[data-theme="dark"] .feature-panel {
  background: #252525;
  border-color: #3a3a3a;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.25);
  color: #f0f0f0;
}

html[data-theme="dark"] .progress-line {
  background: #3a3a3a;
}

html[data-theme="dark"] footer {
  background: #1e1e1e !important;
  border-color: #3a3a3a !important;
}

html[data-theme="dark"] .prose-chat code,
html[data-theme="dark"] .prose-chat pre {
  background: #2a2a2a !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f0f0f0 !important;
}

/* Logo: multiply blend makes it invisible on dark bg — switch to normal */
html[data-theme="dark"] img[alt="Elevise"] {
  mix-blend-mode: normal;
  filter: brightness(0) invert(1);
}

/* Hardcoded Tailwind JIT colour overrides */
html[data-theme="dark"] .text-\[\#111\],
html[data-theme="dark"] .text-\[\#222\],
html[data-theme="dark"] .text-\[\#1f1f1f\],
html[data-theme="dark"] .text-\[\#242424\],
html[data-theme="dark"] .text-\[\#27272a\] {
  color: #f0f0f0 !important;
}

html[data-theme="dark"] .text-\[\#333\],
html[data-theme="dark"] .text-\[\#555\],
html[data-theme="dark"] .text-\[\#666\] {
  color: #aaaaaa !important;
}

html[data-theme="dark"] .bg-white {
  background-color: #2a2a2a !important;
}

html[data-theme="dark"] .bg-\[\#fafafa\] {
  background-color: #252525 !important;
}

html[data-theme="dark"] .border-\[\#ededed\],
html[data-theme="dark"] .border-\[\#e6e6e6\],
html[data-theme="dark"] .border-\[\#e5e5e5\],
html[data-theme="dark"] .border-\[\#eee\] {
  border-color: #3a3a3a !important;
}

html[data-theme="dark"] .bg-\[\#f0e7ff\] {
  background-color: #2d1e50 !important;
}

/* Dark mode scrollbar */
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15) !important;
}

/* ── Toast notifications ─────────────────────────────────────────────────────── */
#ev-toast-container {
  position: fixed;
  top: 72px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 360px;
}

.ev-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: auto;
  animation: ev-toast-in 0.2s ease forwards;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  border: 1px solid;
}

.ev-toast-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.ev-toast-success {
  background: var(--ev-purple-soft);
  border-color: rgba(109, 40, 217, 0.25);
  color: var(--ev-purple);
}

.ev-toast-info {
  background: var(--ev-surface-solid);
  border-color: var(--ev-line);
  color: var(--ev-text);
}

html[data-theme="dark"] .ev-toast-error {
  background: #2d1515;
  border-color: rgba(220, 38, 38, 0.3);
  color: #fca5a5;
}

html[data-theme="dark"] .ev-toast-success {
  background: rgba(109, 40, 217, 0.2);
  border-color: rgba(109, 40, 217, 0.35);
  color: #c4a8ff;
}

html[data-theme="dark"] .ev-toast-info {
  background: #2a2a2a;
  border-color: rgba(255, 255, 255, 0.1);
  color: #f0f0f0;
}

.ev-toast-out {
  animation: ev-toast-out 0.2s ease forwards !important;
}

@keyframes ev-toast-in {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes ev-toast-out {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(16px); }
}

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ev-line);
  background: transparent;
  color: var(--ev-text);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
  flex-shrink: 0;
}

.theme-toggle:hover {
  background: var(--ev-purple-soft);
  border-color: var(--ev-purple);
  color: var(--ev-purple);
  transform: none;
}

html[data-theme="dark"] .theme-toggle:hover {
  background: rgba(109, 40, 217, 0.2);
  border-color: #6d28d9;
  color: #c4a8ff;
}