/* Vastrid theme foundation — appearance (light/dark) and accent (blue/green/purple) */

/* ── Accent colors (independent of appearance) ─────────────────────── */

:root,
[data-theme="default"] {
  --primary: #3b82f6;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, transparent);
  --focus-ring: color-mix(in srgb, var(--primary) 22%, transparent);
}

[data-theme="green"] {
  --primary: #10b981;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, transparent);
  --focus-ring: color-mix(in srgb, var(--primary) 22%, transparent);
}

[data-theme="purple"] {
  --primary: #8b5cf6;
  --primary-hover: color-mix(in srgb, var(--primary) 85%, black);
  --primary-soft: color-mix(in srgb, var(--primary) 8%, transparent);
  --focus-ring: color-mix(in srgb, var(--primary) 22%, transparent);
}

/* ── Light appearance ──────────────────────────────────────────────── */

:root,
[data-appearance="light"] {
  --app-bg: #f9fafb;
  --surface: rgba(255, 255, 255, 0.8);
  --surface-raised: #ffffff;
  --surface-muted: #f3f4f6;
  --surface-hover: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #4b5563;
  --text-muted: #6b7280;
  --border: rgba(0, 0, 0, 0.05);
  --border-strong: #d1d5db;
  --input-bg: #ffffff;
  --overlay: rgba(15, 23, 42, 0.45);
  --shadow: rgba(0, 0, 0, 0.05);

  --success: #16a34a;
  --success-bg: #f0fdf4;
  --success-border: #bbf7d0;
  --warning: #d97706;
  --warning-bg: #fffbeb;
  --warning-border: #fde68a;
  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-border: #fecaca;
  --info: #2563eb;
  --info-bg: #eff6ff;
  --info-border: #bfdbfe;

  /* Temporary compatibility aliases */
  --bg: var(--app-bg);
  --card: var(--surface);
  --text: var(--text-primary);
  --glow: var(--primary-soft);

  color-scheme: light;
}

/* ── Dark appearance ───────────────────────────────────────────────── */

[data-appearance="dark"] {
  --app-bg: #0f1419;
  --surface: #1a2332;
  --surface-raised: #212d3d;
  --surface-muted: #151c27;
  --surface-hover: #243044;
  --text-primary: #f1f5f9;
  --text-secondary: #94a3b8;
  --text-muted: #64748b;
  --border: #2a3544;
  --border-strong: #3b4a5e;
  --input-bg: #1a2332;
  --overlay: rgba(0, 0, 0, 0.55);
  --shadow: rgba(0, 0, 0, 0.35);

  --success: #4ade80;
  --success-bg: rgba(34, 197, 94, 0.12);
  --success-border: rgba(74, 222, 128, 0.35);
  --warning: #fbbf24;
  --warning-bg: rgba(251, 191, 36, 0.12);
  --warning-border: rgba(251, 191, 36, 0.35);
  --danger: #f87171;
  --danger-bg: color-mix(in srgb, var(--danger) 12%, var(--surface-muted));
  --danger-border: color-mix(in srgb, var(--danger) 35%, var(--border));
  --info: #60a5fa;
  --info-bg: rgba(96, 165, 250, 0.12);
  --info-border: rgba(96, 165, 250, 0.35);

  /* Temporary compatibility aliases */
  --bg: var(--app-bg);
  --card: var(--surface);
  --text: var(--text-primary);
  --glow: var(--primary-soft);

  color-scheme: dark;
}

/* ── Settings option buttons ───────────────────────────────────────── */

.theme-option-btn--active,
.appearance-option-btn--active {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  background: var(--primary-soft) !important;
  box-shadow: 0 0 0 1px var(--focus-ring);
}

/* ── Content preview protection ────────────────────────────────────── */

.content-preview-surface,
.vastrid-blog-prose,
.artifact-workspace__prose,
.vastrid-published-blog-article,
.demo-preview-article-shell {
  background-color: #ffffff;
  color: #111827;
}

[data-appearance="dark"] .content-preview-surface,
[data-appearance="dark"] .vastrid-blog-prose,
[data-appearance="dark"] .artifact-workspace__prose,
[data-appearance="dark"] .vastrid-published-blog-article,
[data-appearance="dark"] .demo-preview-article-shell {
  background-color: #ffffff;
  color: #111827;
}

[data-appearance="dark"] .content-preview-surface .vastrid-blog-prose h1,
[data-appearance="dark"] .content-preview-surface .vastrid-blog-prose h2,
[data-appearance="dark"] .content-preview-surface .vastrid-blog-prose h3,
[data-appearance="dark"] .content-preview-surface .vastrid-blog-prose strong,
[data-appearance="dark"] .vastrid-blog-prose h1,
[data-appearance="dark"] .vastrid-blog-prose h2,
[data-appearance="dark"] .vastrid-blog-prose h3,
[data-appearance="dark"] .vastrid-blog-prose strong {
  color: #111827;
}

[data-appearance="dark"] .content-preview-surface .vastrid-blog-prose p,
[data-appearance="dark"] .vastrid-blog-prose p {
  color: #374151;
}

[data-appearance="dark"] .artifact-workspace__prose {
  color: #1f2937;
}