@import 'tailwindcss';

/*
 * Lutra — dark, hard-cornered, Leica/Fuji-styled (mirrors lutra-mobile).
 * No rounded corners anywhere: panels, buttons, inputs, and the canvas all
 * use 0 radius. Thin 1px borders delineate regions on an off-black body;
 * a single red (#cc0000, the mobile app's primary) is the accent — the
 * slider thumbs, the active fills, and the wordmark.
 */
@theme {
  --color-bg: #111111;
  --color-panel: #1f1f1f;
  --color-panel-alt: #262626;
  --color-border: #262626;
  --color-border-strong: #525252;
  --color-ink: #fafafa;
  --color-muted: #a3a3a3;
  --color-accent: #cc0000;

  --font-sans: 'Electrolize', ui-sans-serif, system-ui, -apple-system,
    'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code',
    monospace;
}

html,
body,
#root {
  height: 100%;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Dark scrollbars and native controls (range inputs, file pickers). */
  color-scheme: dark;
}

/* Range inputs rendered as bare tracks with a hard-edged thumb. */
input[type='range'].lutra-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 28px;
  background: transparent;
  cursor: ew-resize;
}
input[type='range'].lutra-range::-webkit-slider-runnable-track {
  height: 2px;
  background: var(--color-border-strong);
}
input[type='range'].lutra-range::-moz-range-track {
  height: 2px;
  background: var(--color-border-strong);
}
input[type='range'].lutra-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -7px;
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border: none;
  border-radius: 0;
}
input[type='range'].lutra-range::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border: none;
  border-radius: 0;
}

/* Numeric readouts use tabular figures so values don't jitter while dragging. */
.tnum {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}