/* =========================================================
   WhyCrime — Design Tokens
   Source file: public/assets/css/tokens.css
   Structure: colors → spacing → typography → effects → breakpoints
   ========================================================= */

:root {
  /* --- Colors (moved as-is from original :root) --- */
  --bg-0: #0a0a0a;
  --bg-1: #141414;
  --bg-2: #1c1c1c;
  --bg-3: #232323;
  --border: #2a2a2a;
  --text: #f5f5f5;
  --text-muted: #a0a0a0;
  --text-dim: #808080;

  --red: #cc0000;
  --red-glow: #ff1a1a;
  --purple: #6a0dad;
  --purple-glow: #9b30ff;

  /* --- Radius --- */
  --radius: 10px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --radius-pill: 999px;

  /* --- Shadows --- */
  --shadow-red: 0 8px 30px rgba(204, 0, 0, 0.25);
  --shadow-purple: 0 8px 30px rgba(107, 33, 168, 0.3);

  /* --- Transition --- */
  --transition: 0.25s ease;
  --transition-slow: 0.3s ease;

  /* --- Spacing scale (8px base) ---
     Tokens: --space-1 through --space-9 + extras
     Maps every px value actually used in style.css.
     Values within 2px of each other that represent the
     same spacing intent were merged into one token. */
  --space-1:  6px;   /* badge padding-top/bottom */
  --space-2:  8px;   /* badge gap, pulse size, secondary-nav gap, etc. */
  --space-3: 10px;   /* btn gap, btn-outline padding, socials gap, etc. */
  --space-4: 12px;   /* badge padding, secondary-nav padding, etc. */
  --space-5: 14px;   /* top-nav padding, news-mini padding */
  --space-6: 16px;   /* most common spacing value */
  --space-7: 20px;   /* hero-content gap, drawer-header padding, etc. */
  --space-8: 24px;   /* container padding, news-body padding, etc. */
  --space-9: 28px;   /* news-grid gap, trend-item padding, etc. */
  --space-10: 30px;  /* course-body padding-top */
  --space-11: 32px;  /* section-head margin-bottom, stats padding */
  --space-12: 40px;  /* icon-btn size, socials a size, footer margin-top */
  --space-13: 48px;  /* hero-panel padding, course-icon size */
  --space-14: 60px;  /* hero-panel padding, trend-icon size, footer padding */
  --space-15: 72px;  /* section padding */

  /* --- Type scale ---
     Tokens: --text-xs through --text-3xl
     Maps every font-size actually used in style.css. */
  --text-xs:  11px;  /* badge font-size */
  --text-sm:  12px;  /* secondary-nav, link-arrow, stats span, copyright */
  --text-base: 13px; /* btn font-size, trend-item span, course-body p */
  --text-md:  14px;  /* news-body p, news-mini h4, newsletter p, input */
  --text-lg:  15px;  /* hero-content p */
  --text-xl:  17px;  /* course-body h3 */
  --text-2xl: 18px;  /* responsive section-title, news-body h3 */
  --text-3xl: 22px;  /* section-title, news-body h3, newsletter h3, trend-icon */

  /* --- Extras (values not in the standard type scale) --- */
  --text-4xl: 24px;  /* brand-logo */
  --text-5xl: 30px;  /* stat strong */
  --text-hero: clamp(28px, 3.4vw, 44px); /* hero h1 */

  /* --- Responsive text sizes (for mobile overrides) --- */
  --text-logo-sm: 20px;  /* brand-logo at <=600px */
  --text-tagline: 9px;   /* brand-tagline at <=600px */
}

/*
  Breakpoints documented here but kept as raw px in @media
  conditions, since CSS custom properties cannot be read
  inside a media query condition:

    960px  — tablet: hero goes single-col, news grid stacks,
             trending/course grids reduce columns
    600px  — mobile: further column reduction, smaller type,
             stacked newsletter form
*/