@import './tokens.css';
@import './primitives.css';

:root {
  color-scheme: dark;
  --color-canvas: #111214;
  --color-surface: #1b1d20;
  --color-surface-raised: #232529;
  --color-text: #f1eee8;
  --color-text-muted: #aaa59b;
  --color-border: #393a3d;
  --color-primary: var(--narada-saffron-500);
  --color-primary-hover: var(--narada-saffron-400);
  --color-primary-soft: #3b2a1d;
  --color-on-primary: #241a02;
  --color-code: #24262a;
  --color-focus: var(--narada-saffron-500);

  /* Compatibility names are scoped to authored-scene documents only. */
  --bg: var(--color-canvas);
  --panel: color-mix(in srgb, var(--color-surface) 92%, transparent);
  --line: var(--color-border);
  --text: var(--color-text);
  --muted: var(--color-text-muted);
  --accent: var(--color-primary);
  --good: var(--status-positive);
  --amber: var(--evidence-source);
  --pink: var(--evidence-synthetic);
}

html[data-design-system='authored-scene'],
html[data-design-system='authored-scene'] body {
  font-family: var(--font-sans);
}

html[data-design-system='authored-scene'] :where(button, input, select) {
  font: inherit;
}

html[data-design-system='authored-scene'] :where(button, [role='button'], input, select):focus-visible {
  outline: 2px solid var(--color-focus) !important;
  outline-offset: 2px;
}

html[data-design-system='authored-scene'] :where(input[type='range'], input[type='checkbox'], input[type='radio']) {
  accent-color: var(--color-primary) !important;
}

html[data-design-system='authored-scene'] button:is(.active, .selected, .sel, [aria-pressed='true']) {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  background: var(--color-primary-soft) !important;
}