/* ArchBoard — design tokens.
   The look borrows from a drafting table: tracing paper by day, a green cutting mat
   by night, with a marking-yellow accent on the mat. System fonts only (nothing to
   download, so nothing to break offline). */
:root {
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --r-1: 3px;
  --r-2: 6px;
  --r-3: 9px;
  --bar-h: 62px;
  --palette-w: 268px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}

:root {
  color-scheme: dark;
  --bg: #0a1a15;
  --surface: #0f241d;
  --raised: #163127;
  --canvas: #12352a;      /* cutting mat */
  --ink: #e8f0eb;
  --ink-2: #a9bcb2;
  --ink-3: #71897e;
  --line: #1f4034;
  --line-2: #2f5a4a;
  --hover: rgba(232, 240, 235, .07);
  --press: rgba(232, 240, 235, .13);
  --accent: #f1c531;
  --accent-ink: #1b1703;
  --accent-soft: rgba(241, 197, 49, .16);
  --danger: #ff8a80;
  --grid-minor: rgba(232, 240, 235, .05);
  --grid-major: rgba(232, 240, 235, .11);
  --shape-fill: #0f2a21;
  --pop-shadow: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 32px -12px rgba(0, 0, 0, .7);
  --hue-rose: #ff8fa3;
  --hue-amber: #f2b648;
  --hue-green: #7fd9a0;
  --hue-cyan: #6ad3df;
  --hue-blue: #8fb2ff;
  --hue-violet: #c0a3ff;
  --tint-mix: 24%;
}

/* Tints are derived, so each hue adapts to the theme on its own. */
:root {
  --tint-rose: color-mix(in srgb, var(--hue-rose) var(--tint-mix), var(--shape-fill));
  --tint-amber: color-mix(in srgb, var(--hue-amber) var(--tint-mix), var(--shape-fill));
  --tint-green: color-mix(in srgb, var(--hue-green) var(--tint-mix), var(--shape-fill));
  --tint-cyan: color-mix(in srgb, var(--hue-cyan) var(--tint-mix), var(--shape-fill));
  --tint-blue: color-mix(in srgb, var(--hue-blue) var(--tint-mix), var(--shape-fill));
  --tint-violet: color-mix(in srgb, var(--hue-violet) var(--tint-mix), var(--shape-fill));
}

/* Applied for ~300ms while the theme flips, so every surface cross-fades together. */
.theme-shift, .theme-shift *, .theme-shift *::before, .theme-shift *::after {
  transition: background-color .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), fill .28s var(--ease), stroke .28s var(--ease) !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}