/* Mutual AI semantic design tokens */
:root {
  --font-sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;

  --color-brand-primary: #ec622b;
  --color-brand-secondary: #7c16f5;
  --color-brand-primary-hover: #d64e1a;
  --color-brand-secondary-hover: #6711ce;
  --color-brand-primary-subtle: rgba(236, 98, 43, 0.1);
  --color-brand-secondary-subtle: rgba(124, 22, 245, 0.1);
  --color-brand-primary-muted: rgba(236, 98, 43, 0.15);
  --color-brand-gradient: linear-gradient(to right, #ec622b, #7c16f5);
  --color-brand-gradient-br: linear-gradient(135deg, #ec622b, #7c16f5);

  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #06b6d4;

  --color-status-neutral-bg: rgba(71, 85, 105, 0.14);
  --color-status-neutral-border: rgba(100, 116, 139, 0.28);
  --color-status-neutral-text: #334155;

  --color-status-warning-bg: rgba(180, 125, 28, 0.16);
  --color-status-warning-border: rgba(180, 125, 28, 0.34);
  --color-status-warning-text: #9a6700;

  --color-status-info-bg: rgba(37, 99, 235, 0.14);
  --color-status-info-border: rgba(37, 99, 235, 0.28);
  --color-status-info-text: #1d4ed8;

  --color-status-success-bg: rgba(22, 163, 74, 0.14);
  --color-status-success-border: rgba(22, 163, 74, 0.3);
  --color-status-success-text: #15803d;

  --color-status-danger-bg: rgba(220, 38, 38, 0.14);
  --color-status-danger-border: rgba(220, 38, 38, 0.28);
  --color-status-danger-text: #b91c1c;

  --color-surface-base: #ffffff;
  --color-surface-primary: #f8fafc;
  --color-surface-secondary: #f1f5f9;
  --color-surface-tertiary: #e2e8f0;
  --color-surface-elevated: #ffffff;
  --color-surface-overlay: rgba(0, 0, 0, 0.5);
  --color-surface-inset: #e2e8f0;

  --color-text-primary: #0f172a;
  --color-text-secondary: #334155;
  --color-text-tertiary: #64748b;
  --color-text-quaternary: #94a3b8;
  --color-text-inverted: #ffffff;
  --color-text-on-brand: #ffffff;

  --color-border-primary: #e2e8f0;
  --color-border-secondary: #cbd5e1;
  --color-border-hover: #94a3b8;
  --color-border-focus: #ec622b;

  --color-interactive-hover: #f1f5f9;
  --color-interactive-active: #e2e8f0;
  --color-interactive-muted: #f8fafc;

  --color-scrollbar-thumb: #cbd5e1;
  --color-scrollbar-thumb-hover: #94a3b8;
  --color-scrollbar-track: #f1f5f9;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.08);
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.16);

  --ui-density-title-size: clamp(1.3rem, 1.45vw, 1.65rem);
  --ui-density-control-height: 2.2rem;
  --ui-density-control-height-sm: 1.9rem;
  --ui-density-input-padding-y: 0.45rem;
  --ui-density-input-padding-x: 0.7rem;
  --ui-density-section-gap: 0.85rem;
  --ui-density-card-padding: 0.65rem;
  --ui-density-table-cell-y: 0.62rem;
  --ui-density-table-cell-x: 0.85rem;

  /* Compatibility aliases for existing styles */
  --primary-blue: var(--color-brand-primary);
  --primary-blue-light: var(--color-brand-secondary);
  --primary-blue-dark: var(--color-brand-primary-hover);
  --accent-blue: var(--color-brand-secondary);
  --neutral-dark: var(--color-text-primary);
  --neutral-medium: var(--color-text-tertiary);
  --neutral-light: var(--color-surface-secondary);
  --neutral-lighter: var(--color-surface-primary);
  --white: var(--color-surface-elevated);
  --success: var(--color-success);
  --warning: var(--color-warning);
  --error: var(--color-error);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --border-color: var(--color-border-primary);
}

html.dark {
  --color-brand-primary-hover: #f1854f;
  --color-brand-secondary-hover: #9d4cf7;

  --color-surface-base: #020617;
  --color-surface-primary: #0f172a;
  --color-surface-secondary: #1e293b;
  --color-surface-tertiary: #334155;
  --color-surface-elevated: #1e293b;
  --color-surface-overlay: rgba(0, 0, 0, 0.6);
  --color-surface-inset: #0f172a;

  --color-text-primary: #ffffff;
  --color-text-secondary: #cbd5e1;
  --color-text-tertiary: #94a3b8;
  --color-text-quaternary: #64748b;
  --color-text-inverted: #0f172a;

  --color-border-primary: #1e293b;
  --color-border-secondary: #334155;
  --color-border-hover: #475569;
  --color-border-focus: #ec622b;

  --color-interactive-hover: #1e293b;
  --color-interactive-active: #334155;
  --color-interactive-muted: #0f172a;

  --color-scrollbar-thumb: #334155;
  --color-scrollbar-thumb-hover: #475569;
  --color-scrollbar-track: #0f172a;

  --color-status-neutral-bg: rgba(72, 94, 128, 0.52);
  --color-status-neutral-border: rgba(128, 150, 182, 0.42);
  --color-status-neutral-text: #eef4ff;

  --color-status-warning-bg: rgba(97, 75, 36, 0.56);
  --color-status-warning-border: rgba(166, 122, 28, 0.7);
  --color-status-warning-text: #f4ead0;

  --color-status-info-bg: rgba(34, 71, 133, 0.58);
  --color-status-info-border: rgba(47, 109, 219, 0.72);
  --color-status-info-text: #e3efff;

  --color-status-success-bg: rgba(21, 105, 73, 0.56);
  --color-status-success-border: rgba(24, 148, 97, 0.7);
  --color-status-success-text: #e1fff4;

  --color-status-danger-bg: rgba(115, 42, 49, 0.58);
  --color-status-danger-border: rgba(198, 74, 88, 0.68);
  --color-status-danger-text: #ffe5e8;

  --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.55);
  --shadow: 0 12px 28px rgba(2, 6, 23, 0.4);
  --shadow-lg: 0 22px 44px rgba(2, 6, 23, 0.55);
}

html.theme-transition *,
html.brand-transition * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html.brand-transition * {
  transition-duration: 0.5s !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}

*::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

*::-webkit-scrollbar-track {
  background: var(--color-scrollbar-track);
}

*::-webkit-scrollbar-thumb {
  background: var(--color-scrollbar-thumb);
  border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
  background: var(--color-scrollbar-thumb-hover);
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.55;
  color: var(--color-text-primary);
  background-color: var(--color-surface-base);
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-brand-primary);
}

a:hover {
  color: var(--color-brand-primary-hover);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-brand-primary-subtle);
  border-color: var(--color-border-focus);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--color-text-primary);
}

.bg-brand-gradient {
  background-image: var(--color-brand-gradient);
}

.bg-brand-gradient-br {
  background-image: var(--color-brand-gradient-br);
}

.gradient-text {
  background-image: var(--color-brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.prose pre {
  padding: 1rem;
  border-radius: 0.75rem;
  background: #0f172a;
  color: #e2e8f0;
  overflow-x: auto;
}

.prose code {
  padding: 0.1rem 0.35rem;
  border-radius: 0.375rem;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

.prose blockquote {
  margin: 0;
  padding-left: 1rem;
  border-left: 4px solid var(--color-brand-primary);
  color: var(--color-text-secondary);
  font-style: italic;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}