/* chords — its own design system (server/frontend/colors_and_type.css and
 * app.css): shadcn's zinc scale with the logo orange pinned as the one accent
 * in every theme and both modes, Geist with Geist Mono, 8px radii, hairlines
 * and no shadows. Structure comes from system.css, the same shadcn system;
 * this file sets the palette, the mark and the radii, and no lattice, because
 * chords' surfaces are flat.
 *
 * The one departure: --link is a darker step of the same orange. chords puts
 * #f97316 on a 14% tint or on a button, never as small text on white, where
 * it reads at 2.9:1. Everything the accent draws — rules, marks, tints — is
 * the brand orange.
 */

@import url("system.css");

:root {
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f4f4f5;
  --tint-border: #e4e4e7;
  --fg: #09090b;
  --muted: #71717a;
  --border: #e4e4e7;
  --accent: #f97316;
  --accent-fg: #ffffff;
  --accent-soft: color-mix(in oklab, #f97316 14%, #ffffff);
  --accent-line: #fdba74;
  --link: #c2410c;
  --selection: #b4d7ff;
  --code-bg: #f4f4f5;
  --code-fg: #c2410c;
  --pre-bg: #ffffff;
  --note: #f97316;
  --tip: #16a34a;
  --warn: #b45309;
  --danger: #ef4444;
  --hl-keyword: #c2410c;
  --hl-string: #16a34a;
  --hl-number: #9333ea;
  --hl-comment: #a1a1aa;
  --hl-type: #0369a1;
  --hl-call: #09090b;
  --radius: 8px;
  --radius-lg: 12px;
  --pattern: none;
  --mark: url("marks/chords-icon.svg");
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #09090b;
    --surface: #18181b;
    --surface-2: #27272a;
    --tint-border: #27272a;
    --fg: #fafafa;
    --muted: #a1a1aa;
    --border: #27272a;
    --accent: #f97316;
    --accent-fg: #ffffff;
    --accent-soft: color-mix(in oklab, #f97316 14%, #09090b);
    --accent-line: #9a4a12;
    --link: #fb923c;
    --selection: #355172;
    --code-bg: #27272a;
    --code-fg: #fdba74;
    --pre-bg: #131316;
    --note: #f97316;
    --tip: #4ade80;
    --warn: #f5b661;
    --danger: #ef4444;
    --hl-keyword: #fb923c;
    --hl-string: #4ade80;
    --hl-number: #c084fc;
    --hl-comment: #71717a;
    --hl-type: #7dd3fc;
    --hl-call: #e4e4e7;
    --pattern: none;
    color-scheme: dark;
  }
}

/* The icon carries its own rounded tile, as it does in the app's sidebar, so
   it does not sit on the system's surface chip. */
.bar-mark {
  width: 1.75rem; height: 1.75rem; border: 0; border-radius: 6px;
  background: var(--mark) center / contain no-repeat;
}

/* No lattice behind the project page; chords' own surfaces are flat. */
body[data-kind="site"] main::before { display: none; }

.docs-nav li a, .prose code { border-radius: 6px; }
.prose pre, .prose .table-wrap { border-radius: 8px; }
.callout, .prose blockquote, .version-banner { border-radius: 0 8px 8px 0; }