/* ─────────────────────────────────────────────────────────────
   ROP TEAM APP — DESIGN TOKENS
   Zine + Rookie Card.
   Light & dark built together. Radii are 0 or 9999px. Never 8px.
   Shadows are hard-offset, no blur.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Type ---------------------------------------------------- */
  --font-display: "Space Grotesk", "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  --fs-label: 11px;
  --fs-body: 16px;         /* body min */
  --fs-context: 13px;
  --fs-number: 36px;
  --fs-number-lg: 44px;
  --fs-h1: 28px;
  --fs-h2: 22px;

  --tracking-label: 0.08em;
  --tracking-number: -0.02em;

  /* Space --------------------------------------------------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 48px;
  --sp-9: 64px;

  /* Sizing -------------------------------------------------- */
  --tap: 44px;
  --border-w: 2px;
  --shadow-x: 4px;
  --shadow-y: 4px;
  --radius-0: 0;
  --radius-pill: 9999px;

  /* Palette — accents (per shelf, applied to BORDER, not fill) */
  --accent-mine: #E4572E;      /* orange-red */
  --accent-work: #17BEBB;      /* teal */
  --accent-house: #FFCB05;     /* amber */
  --accent-spotlight: #7A5CFF; /* deep violet */

  /* Light mode ---------------------------------------------- */
  --bg: #F5F1E8;                /* off-white newsprint */
  --bg-2: #FFFFFF;              /* card face */
  --ink: #111111;               /* body ink */
  --ink-2: #333333;
  --muted: #6B6B6B;
  --rule: #111111;
  --shadow-color: #111111;
  --hairline: rgba(17,17,17,0.14);
  --success: #0A7E3E;
  --warn: #B45309;
  --stale: #8A8378;

  --card-bg: #FFFFFF;
  --card-ink: #111111;
  --skeleton-a: rgba(17,17,17,0.08);
  --skeleton-b: rgba(17,17,17,0.14);
}

/* Dark mode ------------------------------------------------- */
:root[data-theme="dark"] {
  --bg: #0E0E0E;
  --bg-2: #1A1A1A;
  --ink: #F5F1E8;
  --ink-2: #DCDCDC;
  --muted: #A6A6A6;
  --rule: #F5F1E8;
  --shadow-color: #F5F1E8;
  --hairline: rgba(245,241,232,0.18);
  --success: #33D67B;
  --warn: #F5B74B;
  --stale: #A69F94;

  --card-bg: #1A1A1A;
  --card-ink: #F5F1E8;
  --skeleton-a: rgba(245,241,232,0.10);
  --skeleton-b: rgba(245,241,232,0.18);
}

/* Auto follow system if user hasn't chosen (attribute-driven) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #0E0E0E; --bg-2: #1A1A1A; --ink: #F5F1E8; --ink-2: #DCDCDC;
    --muted: #A6A6A6; --rule: #F5F1E8; --shadow-color: #F5F1E8;
    --hairline: rgba(245,241,232,0.18); --success: #33D67B; --warn: #F5B74B;
    --stale: #A69F94; --card-bg: #1A1A1A; --card-ink: #F5F1E8;
    --skeleton-a: rgba(245,241,232,0.10); --skeleton-b: rgba(245,241,232,0.18);
  }
}