/* InstantNode Lunaris tokens, shared by every InstantBlock page.
   Keep product layouts and semantic decision colors independent of the brand. */
:root {
  --font: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: var(--font);
  --disp: var(--font);
  --mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
}

html[data-theme="dark"] body:is(.marketing, .app-surface, .auth-surface, .docs-surface, .error-surface) {
  color-scheme: dark;
  --void: #060606;
  --panel: #0b0b0c;
  --panel-2: #0e0e10;
  --ink: #f2f1ee;
  --mute: #b1b1b7;
  --dim: #94949e;
  --line: #26262c;
  --line-soft: #1b1b20;
  --line-2: #62626d;
  --ember: #3b82f6;
  --cyan: #22d3ee;
  --violet: #8b5cf6;
  --rose: #ff6a94;
  --accent-strong: #91bcff;
  --accent-soft: #111e35;
  --allow: #65d5ad;
  --warning: #f0bf71;
  --warning-soft: #282014;
  --danger: var(--rose);
  --danger-soft: #2a151d;
  --shadow: 0 16px 50px rgb(0 0 0 / .22);
  --focus: #60a5fa;
}

html[data-theme="light"] body:is(.marketing, .app-surface, .auth-surface, .docs-surface, .error-surface) {
  color-scheme: light;
  --void: #f8f9fc;
  --panel: #ffffff;
  --panel-2: #f0f2f7;
  --ink: #171922;
  --mute: #515563;
  --dim: #656977;
  --line: #d9dce5;
  --line-soft: #e8eaf0;
  --line-2: #777e8e;
  --ember: #2563eb;
  --cyan: #087e96;
  --violet: #6d3fd0;
  --rose: #b72754;
  --accent-strong: #2055c9;
  --accent-soft: #e8efff;
  --allow: #117a57;
  --warning: #8e5909;
  --warning-soft: #fff3dc;
  --danger: var(--rose);
  --danger-soft: #fcebf0;
  --shadow: 0 16px 50px rgb(23 25 34 / .06);
  --focus: #2563eb;
}

html[data-theme] body:is(.marketing, .app-surface, .auth-surface, .docs-surface, .error-surface) {
  --font: 'Satoshi', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sans: var(--font);
  --disp: var(--font);
  --bg: var(--void);
  --bg-1: var(--panel);
  --bg-2: var(--panel-2);
  --surface: var(--panel);
  --surface-soft: var(--panel-2);
  --surface-strong: var(--panel-2);
  --tx: var(--ink);
  --tx-2: var(--mute);
  --tx-3: var(--dim);
  --muted: var(--mute);
  --subtle: var(--dim);
  --accent: var(--ember);
  --acc: var(--ember);
  --acc-dim: var(--accent-soft);
  --acc-line: color-mix(in srgb, var(--ember) 42%, var(--panel));
  --cobalt: var(--accent-strong);
  --cobalt-soft: var(--accent-soft);
  --warn: var(--warning);
  --review: var(--warning);
  --block: var(--danger);
  --block-dim: var(--danger-soft);
  --grad: linear-gradient(90deg, var(--cyan), var(--ember) 52%, var(--violet));
  background-color: var(--void);
  color: var(--ink);
  font-family: var(--font);
}

body:is(.marketing, .app-surface, .auth-surface, .docs-surface, .error-surface) :focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

body:is(.marketing, .app-surface, .auth-surface, .docs-surface, .error-surface) ::selection {
  background: var(--ember);
  color: var(--void);
}

body .theme-toggle {
  border-color: var(--line-2);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-family: var(--font);
  box-shadow: var(--shadow);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}