/* Recoil Mobile — design tokens
   OLED-true blacks; SF Pro Text; cool slate accents w/ amber for spend & green for keepers.
   Lineage: Linear iOS, Things 3 dark, Apollo for Reddit. */

:root {
  /* Surfaces — true black for OLED, then layered grays for cards */
  --bg-base: #000000;
  --bg-elev-1: #0d0d10; /* card on bg */
  --bg-elev-2: #16161b; /* nested card / chip */
  --bg-elev-3: #1f1f25; /* hover / pressed */

  /* Hairlines */
  --hair-soft: rgba(255, 255, 255, 0.06);
  --hair: rgba(255, 255, 255, 0.09);
  --hair-strong: rgba(255, 255, 255, 0.14);

  /* Text */
  --fg: #f5f5f7;
  --fg-2: #c5c5cc;
  --fg-3: #8e8e95;
  --fg-4: #5e5e66;
  --fg-5: #3a3a40;

  /* Accent — Recoil cyan-ish, cooler than desktop Linear-blue */
  --accent: #6ea8ff;
  --accent-deep: #4a86e8;
  --accent-faint: rgba(110, 168, 255, 0.12);

  /* Status semantic */
  --ok: #4ade80; /* keeper green */
  --ok-dim: rgba(74, 222, 128, 0.14);
  --warn: #f5b942; /* yellow / progress */
  --warn-dim: rgba(245, 185, 66, 0.14);
  --bad: #ff5b6c; /* fail / blocked */
  --bad-dim: rgba(255, 91, 108, 0.14);
  --info: #6ea8ff;
  --info-dim: rgba(110, 168, 255, 0.12);
  --fallback: #b794f6; /* purple = fallback */
  --fallback-dim: rgba(183, 148, 246, 0.14);

  /* Beat grid colors (slightly muted vs status) */
  --beat-keeper: #3fa05f;
  --beat-progress: #c98a2a;
  --beat-blocked: #c8424f;
  --beat-idle: #2a2a30;

  /* Type — SF Pro stack */
  --font: -apple-system, "SF Pro Text", "SF Pro Display", system-ui, sans-serif;
  --font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace;

  /* Radii */
  --r-sm: 6px;
  --r: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --r-xl: 24px;

  /* Shadows */
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 0 0 1px var(--hair);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  background: #0a0a0c;
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar — invisible on mobile surfaces */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  scrollbar-width: none;
}

/* Numeric tabular for cost / time / counts */
.tabular {
  font-variant-numeric: tabular-nums;
}

/* Mono for take ids */
.mono {
  font-family: var(--font-mono);
  letter-spacing: -0.01em;
}

/* Caps small label */
.caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 10px;
  font-weight: 600;
  color: var(--fg-3);
}