/* pocketlawb design tokens — shared by the landing site and the app.
 *
 * Deliberately mirrors gitlawb.com: black canvas, Geist-Mono-family stack,
 * one green accent, hairline surfaces expressed as alpha over --s-rgb so a
 * single variable flip inverts the whole theme. */

:root {
  --s-rgb: 255, 255, 255;          /* surface/ink channel — flipped in light mode */
  --bg: #000;
  --fg: #fff;

  --accent: #4ade80;
  --accent-dim: #22c55e;
  --warn: #fbbf24;
  --danger: #f87171;

  --t-1: rgba(var(--s-rgb), 1);     /* primary text     */
  --t-2: rgba(var(--s-rgb), 0.7);   /* secondary        */
  --t-3: rgba(var(--s-rgb), 0.55);  /* body copy        */
  --t-4: rgba(var(--s-rgb), 0.4);   /* labels           */
  --t-5: rgba(var(--s-rgb), 0.3);   /* faint            */

  --line: rgba(var(--s-rgb), 0.1);
  --line-soft: rgba(var(--s-rgb), 0.06);
  --fill: rgba(var(--s-rgb), 0.02);
  --fill-2: rgba(var(--s-rgb), 0.045);
  --grid: rgba(var(--s-rgb), 0.024);

  --mono: "Geist Mono", ui-monospace, "SF Mono", SFMono-Regular, "Fira Code",
          Menlo, Consolas, monospace;

  --w: 1152px;                      /* content column   */
  --pad: 24px;
  --nav-h: 56px;
}

:root[data-theme="light"] {
  --s-rgb: 0, 0, 0;
  --bg: #fff;
  --fg: #000;
  --accent: #16a34a;
  --accent-dim: #15803d;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  overscroll-behavior-y: none;
}

body { text-rendering: optimizeLegibility; }

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--accent); color: #000; }

/* The faint 40px graph-paper field behind hero and section heads. */
.grid-field {
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* Small uppercase eyebrow/label used everywhere. */
.label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--t-4);
}

.mono-dim { color: var(--t-4); }

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: none;
}

.dot.pulse { animation: pulse 2.4s ease-in-out infinite; }

@keyframes pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
  50%      { opacity: 0.6; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}