/* ════════════════════════════════════════════════════════════════════
   ReachNet — Design Tokens
   ────────────────────────────────────────────────────────────────────
   Source of truth: design/spec/reachnet-brand-lock.md
   Status: LOCKED (Task 02). Do not modify without hub-level approval.
   Import once at the root layout of any sub-repo.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Accent system v0.4 ── */
  --accent-fill:      #B8FF3D;   /* Hot Lime — button fills, highlights */
  --accent-fg-light:  #65A30D;   /* Forest Lime — mark/accent fg on light */
  --accent-fg-dark:   #B8FF3D;   /* Hot Lime — mark/accent fg on dark */

  /* ── Light surface (marketing) ── */
  --bg:             #FAFAF7;
  --surface:        #FFFFFF;
  --text:           #0A0A0A;
  --text-muted:     #6B6B6B;
  --text-faint:     #9A9A95;
  --border:         #E8E8E5;
  --border-strong:  #D4D4D0;

  /* ── Dark surface (product) ── */
  --d-bg:           #0A0A0A;
  --d-surface:      #141414;
  --d-text:         #FAFAFA;
  --d-text-muted:   #8A8A8A;
  --d-border:       #262626;

  /* ── Font families ── */
  --font-body:      'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, monospace;
  --font-display:   'Michroma', sans-serif;   /* wordmark only — never live body text */

  /* ── Type scale (base unit: 1px) ── */
  --text-xs:        11px;
  --text-sm:        13px;
  --text-base:      15px;
  --text-md:        17px;
  --text-lg:        22px;
  --text-xl:        32px;
  --text-2xl:       44px;
  --text-3xl:       64px;

  /* ── Tracking ── */
  --track-display:  -0.028em;    /* Inter hero/display */
  --track-wordmark: -0.02em;     /* Michroma — already baked into outlined SVG */
  --track-tight:    -0.015em;    /* General tight */

  /* ── Radii ── */
  --radius-sm:      3px;
  --radius:         5px;
  --radius-md:      6px;
  --radius-lg:      8px;
  --radius-xl:      10px;

  /* ── Spacing scale (px) ── */
  --space-1:        4px;
  --space-2:        8px;
  --space-3:        12px;
  --space-4:        16px;
  --space-5:        20px;
  --space-6:        24px;
  --space-8:        32px;
  --space-10:       40px;
  --space-12:       48px;
  --space-16:       64px;
}

/* ── Body defaults ── */
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── Dark mode opt-in via class on root ── */
.dark, [data-theme="dark"] {
  background: var(--d-bg);
  color: var(--d-text);
}

/* ── Accent helpers ── */
.accent-fg     { color: var(--accent-fg-light); }
.dark .accent-fg, [data-theme="dark"] .accent-fg { color: var(--accent-fg-dark); }
.accent-fill  { background: var(--accent-fill); color: var(--text); }

/* ── Mono numerics with tabular figures ── */
.mono-tnum {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum';
}