/* Function Plane — design tokens */

:root {
  --fp-bg: #fafaf7;
  --fp-surface: #ffffff;
  --fp-surface-2: #f3f3ef;
  --fp-line: #e6e6e0;
  --fp-line-strong: #1f1f1d;
  --fp-ink: #18181a;
  --fp-ink-2: #4a4a48;
  --fp-ink-3: #8a8a85;
  --fp-ink-4: #b8b8b2;
  --fp-accent: #18181a;
  --fp-accent-ink: #fafaf7;
  --fp-star: #1f1f1d;
  --fp-star-empty: #d6d6d0;
  --fp-grid: #ececea;
  --fp-grid-axis: #c8c8c2;
  --fp-locked: #c8c8c2;
  --lv-bg: #ffffff;
  --lv-surface: #fafaf7;
  --lv-line: #e6e6e0;
  --lv-grid-minor: #ededea;
  --lv-grid-major: #d8d8d2;
  --lv-axis: #1f1f1d;
  --lv-tick: #8a8a85;
  --lv-star: #d4a017;
  --lv-ball: #2563b0;
  --lv-ball-stroke: #18406e;
  --lv-ball-shine: rgba(255,255,255,0.7);
  --fp-play-bg: #18181a;
  --fp-play-ink: #fafaf7;
  --fp-play-muted: rgba(250,250,247,0.6);
  --fp-play-line: rgba(250,250,247,0.14);
  --fp-play-pill-bg: #fafaf7;
  --fp-play-pill-ink: #18181a;
  /* safe area */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

[data-theme="dark"] {
  --fp-bg: #0e0f10;
  --fp-surface: #161718;
  --fp-surface-2: #1f2122;
  --fp-line: #2a2c2e;
  --fp-line-strong: #e6e6e0;
  --fp-ink: #f3f3ef;
  --fp-ink-2: #c4c4be;
  --fp-ink-3: #8a8a85;
  --fp-ink-4: #5a5b5c;
  --fp-accent: #f3f3ef;
  --fp-accent-ink: #0e0f10;
  --fp-star: #f3f3ef;
  --fp-star-empty: #2f3133;
  --fp-grid: #1c1d1f;
  --fp-grid-axis: #353739;
  --fp-locked: #2f3133;
  --lv-bg: #0e0f10;
  --lv-surface: #161718;
  --lv-line: #2a2c2e;
  --lv-grid-minor: #1a1b1d;
  --lv-grid-major: #2a2c2e;
  --lv-axis: #c4c4be;
  --lv-tick: #6a6b6d;
  --lv-star: #e8b54a;
  --lv-ball: #4a8de0;
  --lv-ball-stroke: #2a5fa0;
  --lv-ball-shine: rgba(255,255,255,0.5);
  --fp-play-bg: #1f2225;
  --fp-play-ink: #f3f3ef;
  --fp-play-muted: rgba(243,243,239,0.55);
  --fp-play-line: rgba(243,243,239,0.08);
  --fp-play-pill-bg: #f3f3ef;
  --fp-play-pill-ink: #0e0f10;
}

[data-density="compact"] {
  --fp-pad-x: 18px;
  --fp-row-y: 14px;
  --fp-stack: 14px;
}
[data-density="comfortable"] {
  --fp-pad-x: 22px;
  --fp-row-y: 18px;
  --fp-stack: 20px;
}

/* Prevent mobile scroll bouncing that causes black-screen compositing glitch */
html, body {
  overscroll-behavior: none;
  -webkit-overflow-scrolling: touch;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
button:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }
input { font: inherit; }

.fp-screen {
  background: var(--fp-bg);
  color: var(--fp-ink);
  font-family: 'Geist', 'Inter', -apple-system, system-ui, sans-serif;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.01em;
}

.fp-mono {
  font-family: 'Geist Mono', 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-feature-settings: 'ss02';
}

.fp-serif-num {
  font-family: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  font-style: italic;
  font-weight: 400;
}

.fp-scroll::-webkit-scrollbar { width: 0; height: 0; }
.fp-scroll { scrollbar-width: none; }

.fp-hr { height: 1px; background: var(--fp-line); width: 100%; }

.fp-mini-grid {
  background-image:
    linear-gradient(to right, var(--fp-grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--fp-grid) 1px, transparent 1px);
}