/* ==========================================================================
   Cloakwise — Design Tokens
   Version: 2.0.0
   Usage: Linked in every HTML page before nav.css and components.css
   ========================================================================== */

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }
body { min-height: 100vh; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; font: inherit; color: inherit; }

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bone:   #F0F4F8;
  --paper:  #FFFFFF;

  /* Text */
  --ink:    #2B2B2B;
  --muted:  #6B6862;
  --dim:    #8A8680;

  /* Primary accent — Teal (trust, privacy, brand) */
  --acc:    #157554;
  --acch:   #0f5940;
  --accbg:  rgba(21, 117, 84, 0.10);

  /* Secondary accent — Copper (CTAs, Pro badges, warnings) */
  --sec:    #A15429;
  --sech:   #7D4020;
  --secbg:  rgba(161, 84, 41, 0.10);

  /* Trust signal — Blue */
  --tru:    #1a6b9e;
  --trubg:  rgba(26, 107, 158, 0.10);

  /* Borders */
  --bdr:    #D6D2CA;
  --bdrdim: #E8E4DB;

  /* Status */
  --dng:    #C53030;
  --dngtbg: rgba(197, 48, 48, 0.08);

  /* Typography */
/*
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
 */
  --font-body: 'Poppins', serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-full: 9999px;

  /* Layout */
  --content-max: 1024px;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--font-body);
  background: var(--bone);
  color: var(--ink);
}

.container {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 1.5rem;
}