/* ==========================================================================
   ElectOrchestrator — design foundation
   Shared by the landing page and the studio.

   The palette is deliberately small:
     · a zinc neutral ramp for every surface, line and piece of text
     · one blue accent, reserved for "this is active / selected / focused"
     · green, amber and red, used only to report status

   Anything that is not one of those three jobs stays neutral. The primary
   button is the foreground colour, not the accent, so the accent never has to
   compete with a call to action.
   ========================================================================== */

:root,
html[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-app: #fafafa;
  --bg-subtle: #f4f4f5;
  --bg-muted: #e4e4e7;
  --bg-inverse: #18181b;

  --border: #e4e4e7;
  --border-strong: #d4d4d8;

  --fg: #09090b;
  --fg-2: #3f3f46;
  --fg-3: #71717a;
  --fg-4: #a1a1aa;
  --fg-inverse: #fafafa;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-fg: #ffffff;
  --accent-soft: #eff6ff;
  --accent-text: #1d4ed8;
  --accent-ring: rgba(37, 99, 235, 0.28);

  --success: #16a34a;
  --success-soft: #f0fdf4;
  --success-text: #15803d;
  --warning: #d97706;
  --warning-soft: #fffbeb;
  --warning-text: #b45309;
  --danger: #dc2626;
  --danger-soft: #fef2f2;
  --danger-text: #b91c1c;

  --shadow-sm: 0 1px 2px rgba(9, 9, 11, 0.05);
  --shadow-md: 0 1px 3px rgba(9, 9, 11, 0.06), 0 6px 16px rgba(9, 9, 11, 0.06);
  --shadow-lg: 0 2px 6px rgba(9, 9, 11, 0.06), 0 20px 48px rgba(9, 9, 11, 0.14);

  /* Syntax colours: muted, and only as saturated as it takes to tell apart. */
  --tok-tag: #1d4ed8;
  --tok-attr: #6d28d9;
  --tok-str: #047857;
  --tok-num: #b45309;
  --tok-kw: #9f1239;
  --tok-com: #a1a1aa;
  --tok-punc: #71717a;
}

html[data-theme="dark"] {
  color-scheme: dark;

  --bg: #111113;
  --bg-app: #09090b;
  --bg-subtle: #18181b;
  --bg-muted: #27272a;
  --bg-inverse: #fafafa;

  --border: #232327;
  --border-strong: #34343a;

  --fg: #fafafa;
  --fg-2: #d4d4d8;
  --fg-3: #a1a1aa;
  --fg-4: #66666e;
  --fg-inverse: #09090b;

  --accent: #3b82f6;
  --accent-hover: #60a5fa;
  --accent-fg: #ffffff;
  --accent-soft: rgba(59, 130, 246, 0.12);
  --accent-text: #93c5fd;
  --accent-ring: rgba(59, 130, 246, 0.4);

  --success: #22c55e;
  --success-soft: rgba(34, 197, 94, 0.1);
  --success-text: #4ade80;
  --warning: #f59e0b;
  --warning-soft: rgba(245, 158, 11, 0.1);
  --warning-text: #fbbf24;
  --danger: #ef4444;
  --danger-soft: rgba(239, 68, 68, 0.1);
  --danger-text: #f87171;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 2px 8px rgba(0, 0, 0, 0.45), 0 24px 56px rgba(0, 0, 0, 0.55);

  --tok-tag: #93c5fd;
  --tok-attr: #c4b5fd;
  --tok-str: #86efac;
  --tok-num: #fcd34d;
  --tok-kw: #f9a8d4;
  --tok-com: #71717a;
  --tok-punc: #a1a1aa;
}

:root {
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 4px;
  --r: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  --ease: cubic-bezier(0.2, 0, 0, 1);
}

/* ── Reset ─────────────────────────────────────────────────────────────── */

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

[hidden] {
  display: none !important;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--bg-app);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.5;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

a {
  color: inherit;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

code,
kbd,
pre {
  font-family: var(--mono);
}

svg {
  flex-shrink: 0;
}

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--fg);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.12s var(--ease), border-color 0.12s var(--ease),
    color 0.12s var(--ease), opacity 0.12s var(--ease);
}

.btn:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.btn:disabled {
  opacity: 0.5;
}

.btn svg {
  color: currentColor;
}

.btn--primary {
  background: var(--fg);
  border-color: var(--fg);
  color: var(--fg-inverse);
}

.btn--primary:hover:not(:disabled) {
  background: var(--fg);
  border-color: var(--fg);
  opacity: 0.86;
}

.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: transparent;
  color: var(--fg);
}

.btn--lg {
  height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

.btn--sm {
  height: 28px;
  padding: 0 10px;
  font-size: 12.5px;
}

.btn--xs {
  height: 24px;
  padding: 0 8px;
  font-size: 12px;
  gap: 5px;
  border-radius: var(--r-sm);
}

.btn--icon {
  width: 32px;
  padding: 0;
}

.btn--icon.btn--sm {
  width: 28px;
}

.btn--icon.btn--xs {
  width: 24px;
}

/* ── Keyboard hint ─────────────────────────────────────────────────────── */

kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  line-height: 1;
}

/* ── Brand mark ────────────────────────────────────────────────────────── */

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--r);
  background: var(--fg);
  color: var(--fg-inverse);
}

/* ── Spinner ───────────────────────────────────────────────────────────── */

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--border-strong);
  border-top-color: var(--fg-2);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@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;
  }
}