/* OLED black theme — the entire palette lives here. Components reference
   only these variables (no hardcoded colors), so the look is retunable from
   one place. Red is reserved for state needing attention (conflicts,
   missing, destructive, live). */
:root {
  /* True-black base for OLED; surfaces step up from pure black. */
  --bg: #000;
  --canvas: #000;
  --surface: #0c0c0e;
  --surface-2: #141417;
  --surface-3: #1c1c20;

  /* Hairlines / borders */
  --hair: #1e1e22;
  --hair-2: #2a2a30;
  --hair-3: #3a3a42;
  --faint: #36363c;

  /* Text */
  --ink: #f1f1f3;
  --ink-2: #d1d1d6;
  --dim: #8a8a93;
  --dim-2: #5e5e66;
  --on-ink: #000; /* text on ink/accent-filled controls */

  --pure-white: #fff;

  /* State (use sparingly) */
  --red: #ef4444;
  --red-dim: #6b1414;
  --red-glow: rgba(239, 68, 68, 0.1);
  --green: #3acc7a;
  --green-dim: rgba(58, 204, 122, 0.1);
  --amber: #d49a2a;

  /* Translucent layers */
  --nav-bg: rgba(0, 0, 0, 0.85);
  --overlay: rgba(0, 0, 0, 0.6);
  --press: rgba(0, 0, 0, 0.25); /* pressed/hover scrim on tinted chips */
  --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.5); /* dropdowns / menus */

  /* Photo placeholder (diagonal stripes) */
  --ph-bg: #121214;
  --ph-stripe-1: rgba(255, 255, 255, 0.02);
  --ph-stripe-2: rgba(255, 255, 255, 0.05);

  --sans: 'Geist', ui-sans-serif, -apple-system, BlinkMacSystemFont, system-ui,
    sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;

  /* aliases kept for the first-pass pages */
  --text: var(--ink);
  --text-muted: var(--dim);
  --text-dim: var(--dim-2);
  --border: var(--hair);
  --accent: var(--red);

  /* === Sizing: deliberately few variants — at most 3 per family so the
     UI stays visually consistent. Snap to the nearest step; if a value
     isn't here, reuse the closest — do NOT add a 4th. === */

  /* Control heights (tap target → compact → pill) */
  --control-h: 44px;
  --control-sm: 32px;
  --chip-h: 24px;

  /* Spacing — 3 steps. tight (icon/text gaps) → base (most
     padding/gaps) → lg (section/card/page gutters). */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;

  /* Radii — 3 steps */
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 12px;

  /* Border width */
  --border-w: 1px;

  /* Type — 3 steps. sm (labels/meta) → base (body/controls) →
     lg (headings). body root = 15px; 0.8rem = 12px. */
  --text-sm: 0.8rem;
  --text-base: 0.95rem;
  --text-lg: 1.5rem;

  /* Letter-spacing — 3 steps */
  --track-base: -0.005em;
  --track-tight: -0.02em;
  --track-wide: 0.04em;

  /* Max widths — 3 (narrow card, content column, popover) */
  --auth-max: 380px;
  --page-max: 500px;
  --pop: 14rem;

  /* True singletons */
  --thumb: 60px; /* item list thumbnail */
  --dot: 6px; /* section-header / separator marker */
}

* {
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: 'ss01';
  font-size: 15px;
  line-height: 1.55;
  letter-spacing: var(--track-base);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#page-container {
  min-height: 100vh;
}

a {
  color: inherit;
}

input,
button,
select,
textarea {
  font: inherit;
}

.mono {
  font-family: var(--mono);
  font-feature-settings: 'tnum', 'zero';
}

/* Large tap targets for the one-handed, low-light load-out flow (spec 4.10). */
button,
[role='button'],
a.tap {
  min-height: var(--control-h);
}

::selection {
  background: var(--red);
  color: var(--pure-white);
}