/* theme.css - Theme tokens and utilities */

:root {
  /* Light defaults (will be overridden if OS prefers dark or data-theme='dark') */
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #f8fafc;
  --bg-card: #f1f5f9;
  --bg-card-active: #e2e8f0;
  --bg-soft: #eef6ff;
  --text: #0f172a;
  --text-strong: #020617;
  --text-subtle: #475569;
  --accent: #38bdf8;        /* existing accent stays */
  --accent-strong: #0ea5e9; /* existing strong accent */
  --cta-blue: #2563eb;      /* Try Voice Demo base */
  --cta-blue-strong: #1d4ed8; /* Try Voice Demo hover */
  --border: #e2e8f0;
  --brand: var(--brand-override, #8b5cf6); /* NEW brand token */
  --radius: 18px;
  --shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.15);
  --font-stack: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Dark tokens (mirror current styles.css root) */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #040711;
  --bg-elevated: #0b1120;
  --bg-card: #111a2c;
  --bg-card-active: #17233b;
  --bg-soft: rgba(148, 163, 184, 0.08);
  --text: #f8fafc;
  --text-strong: #f8fafc;
  --text-subtle: #94a3b8;
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --border: #1e293b;
  --shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.75);
}

/* Respect OS if user hasn't chosen manually */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #040711;
    --bg-elevated: #0b1120;
    --bg-card: #111a2c;
    --bg-card-active: #17233b;
    --bg-soft: rgba(148, 163, 184, 0.08);
    --text: #f8fafc;
    --text-strong: #f8fafc;
    --text-subtle: #94a3b8;
    --accent: #38bdf8;
    --accent-strong: #0ea5e9;
    --border: #1e293b;
    --shadow: 0 24px 48px -36px rgba(15, 23, 42, 0.75);
  }
}

/* Utility: gradient using tokens */
.gradient-text {
  background: linear-gradient(135deg, var(--accent), var(--brand));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Theme-aware background gradients */
.bg-theme-gradient {
  background: radial-gradient(circle at top left, var(--bg-elevated), var(--bg));
}

/* Focus states with brand color */
.focus-brand:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* Glass effect for both themes */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Dark mode glass effect */
:root[data-theme="dark"] .glass-effect,
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .glass-effect {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* Hover lift effect */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}

/* Feature card theme-aware */
.feature-card {
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  background: var(--bg-card);
}

.feature-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
}

/* Token utility helpers */
.token-bg-surface {
  background: var(--bg);
}

.token-bg-elevated {
  background: var(--bg-elevated);
}

.token-bg-card {
  background: var(--bg-card);
}

.token-bg-card-active {
  background: var(--bg-card-active);
}

.token-bg-soft {
  background: var(--bg-soft);
}

.token-text-primary {
  color: var(--text);
}

.token-text-strong {
  color: var(--text-strong);
}

.token-text-subtle {
  color: var(--text-subtle);
}

.token-border,
.token-border::before,
.token-border::after {
  border-color: var(--border) !important;
}

.token-button-contrast {
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.token-button-contrast.cta-demo-button {
  background-color: var(--cta-blue) !important;
  color: #fff !important;
  border-color: var(--cta-blue) !important;
}

.token-button-contrast.cta-demo-button:hover {
  background-color: var(--cta-blue-strong) !important;
  border-color: var(--cta-blue-strong) !important;
}

:root[data-theme="dark"] .token-button-contrast {
  background-color: var(--cta-blue);
  color: var(--text);
  border-color: var(--cta-blue);
  border-color: color-mix(in srgb, var(--cta-blue) 70%, transparent);
}

.token-button-contrast:hover {
  background-color: color-mix(in srgb, var(--bg) 85%, var(--text) 15%);
  border-color: color-mix(in srgb, var(--border) 70%, var(--text) 30%);
}

:root[data-theme="dark"] .token-button-contrast:hover {
  background-color: var(--cta-blue-strong);
  border-color: var(--cta-blue-strong);
  border-color: color-mix(in srgb, var(--cta-blue-strong) 70%, transparent);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .token-button-contrast {
    background-color: var(--cta-blue);
    color: var(--text);
    border-color: var(--cta-blue);
    border-color: color-mix(in srgb, var(--cta-blue) 70%, transparent);
  }

  :root:not([data-theme="light"]) .token-button-contrast:hover {
    background-color: var(--cta-blue-strong);
    border-color: var(--cta-blue-strong);
    border-color: color-mix(in srgb, var(--cta-blue-strong) 70%, transparent);
  }
}

.token-shadow {
  box-shadow: var(--shadow);
}

.token-card {
  border-radius: var(--radius);
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.link-subtle,
.token-text-link {
  color: var(--text-subtle);
  transition: color 0.3s ease;
}

.link-subtle:hover,
.token-text-link:hover {
  color: var(--text);
}

:root[data-theme="dark"] #themeToggle {
  background: rgba(148, 163, 184, 0.16);
  border-color: rgba(148, 163, 184, 0.55);
  box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35), 0 6px 18px -12px rgba(15, 23, 42, 0.9);
}

:root[data-theme="dark"] #themeToggle:hover,
:root[data-theme="dark"] #themeToggle:focus-visible {
  background: rgba(148, 163, 184, 0.22);
  border-color: rgba(148, 163, 184, 0.75);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #themeToggle {
    background: rgba(148, 163, 184, 0.16);
    border-color: rgba(148, 163, 184, 0.55);
    box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.35), 0 6px 18px -12px rgba(15, 23, 42, 0.9);
  }

  :root:not([data-theme="light"]) #themeToggle:hover,
  :root:not([data-theme="light"]) #themeToggle:focus-visible {
    background: rgba(148, 163, 184, 0.22);
    border-color: rgba(148, 163, 184, 0.75);
  }
}

.token-text-primary-link {
  color: var(--text);
  transition: color 0.3s ease;
}

.token-text-primary-link:hover {
  color: var(--accent-strong);
}

.token-divider {
  border-color: color-mix(in srgb, var(--border) 80%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  .hover-lift,
  .feature-card,
  .token-button-contrast,
  .link-subtle,
  .token-text-link,
  .token-text-primary-link {
    transition: none;
  }
}

@supports not (color: color-mix(in srgb, black 50%, white 50%)) {
  .token-button-contrast:hover {
    filter: brightness(0.92);
  }
}