/* Backline · Instrument (the default style)
   Precise and quiet: white and graphite with one ink-blue accent, Geist and
   Geist Mono. Follows the device between light and dark. Motion only confirms
   a change of state: figures count to their value, checks draw in.
   These tokens sit on bare :root, so they are also the fallback for anything
   another style leaves unset. */

:root {
  color-scheme: light dark;

  --f-sans: 'Geist', 'Geist Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --bg: oklch(0.985 0 0);
  --bg-2: oklch(0.972 0.003 264);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.962 0.004 264);
  --line: oklch(0.91 0.004 264);
  --line-2: oklch(0.945 0.003 264);
  --text: oklch(0.2 0.012 264);
  --text-2: oklch(0.45 0.012 264);
  --text-3: oklch(0.54 0.01 264);
  --link: var(--accent-text);

  --accent: oklch(0.48 0.2 264);
  --accent-ink: oklch(1 0 0);
  --accent-text: oklch(0.46 0.2 264);
  --accent-tint: oklch(0.955 0.025 264);
  --accent-tint-strong: oklch(0.9 0.05 264);
  --accent-line: oklch(0.8 0.08 264);

  --good: oklch(0.52 0.13 152);
  --good-tint: oklch(0.965 0.03 152);
  --good-line: oklch(0.83 0.07 152);
  --warn: oklch(0.5 0.12 62);
  --warn-tint: oklch(0.967 0.03 78);
  --warn-line: oklch(0.84 0.08 72);
  --bad: oklch(0.53 0.19 26);
  --bad-tint: oklch(0.965 0.02 26);
  --bad-line: oklch(0.84 0.07 26);

  --focus: oklch(0.55 0.2 264);
  --focus-ring: oklch(0.55 0.2 264 / .22);

  --shadow-1: 0 1px 2px oklch(0.2 0.01 264 / .05);
  --shadow-2: 0 1px 2px oklch(0.2 0.01 264 / .06), 0 24px 48px -24px oklch(0.2 0.02 264 / .22);
  --shadow-pop: 0 1px 2px oklch(0.2 0.01 264 / .08), 0 14px 36px -10px oklch(0.2 0.02 264 / .24);

  --input-bg: var(--surface);
  --input-line: oklch(0.87 0.005 264);
  --btn-bg: var(--surface);
  --btn-line: oklch(0.87 0.005 264);
  --btn-ink: var(--text);
  --btn-shadow: 0 1px 2px oklch(0.2 0.01 264 / .05);
  --btn-hover-bg: oklch(0.975 0.003 264);
  --btn-hover-line: oklch(0.79 0.006 264);
  --btn-press: translateY(.5px);
  --btn-primary-bg: var(--accent);
  --btn-primary-ink: oklch(1 0 0);
  --btn-primary-line: var(--accent);
  --btn-primary-shadow: 0 1px 2px oklch(0.3 0.15 264 / .25), inset 0 1px 0 oklch(1 0 0 / .14);
  --btn-primary-hover: oklch(0.43 0.2 264);

  --avatar-bg: var(--text);
  --avatar-ink: var(--surface);
  --store-no-bg: var(--text);
  --store-no-ink: var(--surface);
  --side-bg: var(--bg-2);
  --nav-hover: oklch(0.945 0.004 264);
  --nav-on-bg: var(--surface);
  --nav-on-shadow: 0 0 0 1px var(--line), 0 1px 2px oklch(0.2 0.01 264 / .05);
  --row-hover: oklch(0.978 0.003 264);
  --hero-em: var(--accent-text);

  --chart-grid: var(--line-2);
  --chart-zero: var(--line);
  --chart-axis: var(--text-3);
  --chart-x: var(--text-3);
  --chart-val: var(--text-2);
  --chart-prior: var(--text-2);
  --chart-sales: var(--accent);
  --chart-net: oklch(0.6 0.13 152);
  --chart-margin: oklch(0.72 0.14 72);
  --chart-labor: oklch(0.6 0.1 205);
  --chart-up: oklch(0.62 0.14 152);
  --chart-down: oklch(0.62 0.19 26);
  --chart-up-ink: var(--good);
  --chart-down-ink: var(--bad);
  --chart-spark: var(--accent);
}

@media screen and (prefers-color-scheme: dark) {
  :root[data-style="instrument"] {
    --bg: oklch(0.165 0.008 264);
    --bg-2: oklch(0.185 0.009 264);
    --surface: oklch(0.205 0.01 264);
    --surface-2: oklch(0.245 0.011 264);
    --line: oklch(0.3 0.012 264);
    --line-2: oklch(0.255 0.011 264);
    --text: oklch(0.96 0.004 264);
    --text-2: oklch(0.79 0.01 264);
    --text-3: oklch(0.68 0.01 264);

    --accent: oklch(0.72 0.15 264);
    --accent-ink: oklch(0.16 0.02 264);
    --accent-text: oklch(0.8 0.11 264);
    --accent-tint: oklch(0.26 0.05 264);
    --accent-tint-strong: oklch(0.34 0.08 264);
    --accent-line: oklch(0.46 0.1 264);

    --good: oklch(0.78 0.15 152);
    --good-tint: oklch(0.25 0.04 152);
    --good-line: oklch(0.43 0.08 152);
    --warn: oklch(0.83 0.13 78);
    --warn-tint: oklch(0.26 0.04 75);
    --warn-line: oklch(0.46 0.08 70);
    --bad: oklch(0.73 0.17 26);
    --bad-tint: oklch(0.25 0.05 26);
    --bad-line: oklch(0.46 0.1 26);

    --focus: oklch(0.74 0.14 264);
    --focus-ring: oklch(0.74 0.14 264 / .3);
    --shadow-1: 0 1px 2px oklch(0 0 0 / .3);
    --shadow-2: 0 1px 2px oklch(0 0 0 / .3), 0 24px 48px -24px oklch(0 0 0 / .6);
    --shadow-pop: 0 1px 2px oklch(0 0 0 / .4), 0 18px 44px -10px oklch(0 0 0 / .6);

    --input-bg: oklch(0.18 0.009 264);
    --input-line: oklch(0.35 0.012 264);
    --btn-bg: oklch(0.23 0.01 264);
    --btn-line: oklch(0.35 0.012 264);
    --btn-shadow: none;
    --btn-hover-bg: oklch(0.265 0.011 264);
    --btn-hover-line: oklch(0.44 0.012 264);
    --btn-primary-ink: oklch(0.16 0.02 264);
    --btn-primary-shadow: none;
    --btn-primary-hover: oklch(0.78 0.12 264);

    --avatar-bg: oklch(0.88 0.01 264);
    --avatar-ink: oklch(0.2 0.01 264);
    --store-no-bg: oklch(0.88 0.01 264);
    --store-no-ink: oklch(0.2 0.01 264);
    --nav-hover: oklch(0.225 0.01 264);
    --nav-on-shadow: 0 0 0 1px var(--line);
    --row-hover: oklch(0.228 0.01 264);

    --chart-net: oklch(0.74 0.14 152);
    --chart-margin: oklch(0.8 0.13 78);
    --chart-labor: oklch(0.74 0.1 205);
    --chart-up: oklch(0.74 0.15 152);
    --chart-down: oklch(0.7 0.17 26);
  }
}

/* ---------- signature ---------- */

/* the public page's hero sits on a faint measuring grid */
[data-style="instrument"] .hero::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  inset: 0 calc(var(--gutter) * -1);
  background-image: linear-gradient(var(--line-2) 1px, transparent 1px), linear-gradient(90deg, var(--line-2) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  -webkit-mask: radial-gradient(900px 560px at 72% 42%, #000, transparent 75%);
          mask: radial-gradient(900px 560px at 72% 42%, #000, transparent 75%);
}
[data-style="instrument"] .hero-demo { z-index: 1; }

/* the logo's middle bar carries the accent */
[data-style="instrument"] .logo-mark .logo-hot { fill: var(--accent); }

/* primary actions read as solid ink blue; a pressed key sinks half a pixel */
[data-style="instrument"] .btn.primary:active { box-shadow: none; }

/* bar charts: flat and quiet, the latest bar at full strength */
[data-style="instrument"] .bar .b-body { opacity: .82; }
[data-style="instrument"] .bar.now .b-body, [data-style="instrument"] .s-up .b-body, [data-style="instrument"] .s-down .b-body { opacity: 1; }