/* ════════════════════════════════════════════════════════════════════
   DARK OPS ARCHERY — Design tokens
   Drop this into any project as the foundation. Everything else in
   the system is built on these tokens.
   ════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Paper / Ink (light) ──────────────────────────────────────── */
  --paper:        #f4efe6;   /* page background — warm bone */
  --paper-2:      #ebe5d8;   /* subdued surface (rows, chips, soft cards) */
  --paper-3:      #e1dac9;   /* deeper surface (hover, scrolled rows) */
  --ink:          #0e0e0c;   /* primary text + heavy borders */
  --ink-soft:     #1a1814;   /* hover ink, secondary headings */

  /* ─── Brand accent ─────────────────────────────────────────────── */
  --orange:       #ff4612;   /* the ONE accent — bullseye, CTAs, alerts */
  --orange-soft:  #ff461215; /* low-opacity wash for backgrounds */

  /* ─── Lines + muted text ───────────────────────────────────────── */
  --line:         #0e0e0c1f; /* default 1px hairline */
  --line-strong:  #0e0e0c;   /* used as alias for --ink in section dividers */
  --muted:        #0e0e0c88; /* secondary copy */
  --muted-2:      #0e0e0c66; /* placeholder, disabled */

  /* ─── Semantic state ───────────────────────────────────────────── */
  --good:         #2a8a3e;   /* confirmed, paid, captured */
  --bad:          #c4321a;   /* destructive, escalated, rejected */
  --warn:         #d99100;   /* preauth, awaiting-review, queued */
  --info:         #1a4cf2;   /* reserved, in-flight */

  /* ─── Type ─────────────────────────────────────────────────────── */
  --font-sans:    'Archivo', -apple-system, sans-serif;
  --font-display: 'Archivo', -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ─── Radii ────────────────────────────────────────────────────── */
  --r-sm:    6px;    /* tags, small inputs */
  --r-md:   10px;    /* inputs, action-buttons, panels */
  --r-lg:   14px;    /* cards, modals, tables */
  --r-pill: 999px;   /* state pills, filter chips, primary buttons */
}

[data-theme="dark"] {
  --paper:        #14130f;
  --paper-2:      #1d1c17;
  --paper-3:      #26241e;
  --ink:          #f4efe6;
  --ink-soft:     #e6dfd0;
  --orange:       #ff5a2a;
  --orange-soft:  #ff5a2a1f;
  --line:         #f4efe61f;
  --line-strong:  #f4efe6;
  --muted:        #f4efe688;
  --muted-2:      #f4efe666;

  --good: #5fc777;
  --bad:  #ee6a55;
  --warn: #f0b13d;
  --info: #6a8af7;
}

/* ─── Spacing scale (use as inline var or copy values) ──────────────
   The system DOES NOT use a CSS-variable spacing scale. Spacing is
   written inline using these literal values:
       4 · 6 · 8 · 10 · 12 · 14 · 16 · 18 · 22 · 28 · 36
   This keeps padding/margin grep-able and matches the tight,
   editorial rhythm of the system. */

/* ─── Reset (minimal — adapt as needed) ─────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ─── Type atoms — copy these into every project ───────────────── */
.mono     { font-family: var(--font-mono); }
.display  { font-family: var(--font-display); font-weight: 900; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
  font-weight: 500;
}

.label-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 500;
}