/* ==========================================================================
   Code Coin Cognition — Design tokens
   Source of truth: website/code_coin_cognition_design_system.md §13
   ========================================================================== */

:root {
  /* Base backgrounds */
  --bg-ink: #070A12;
  --bg-navy: #0B1020;
  --surface: #111827;
  --surface-soft: #172033;

  /* Text */
  --text-primary: #F8FAFC;
  --text-secondary: #CBD5E1;
  --text-muted: #94A3B8;

  /* Accents — assigned meanings */
  --accent-cyan: #22D3EE;      /* primary brand, highlights, Cognition word */
  --accent-violet: #8B5CF6;    /* AI/reasoning themes, In-development status */
  --accent-amber: #F59E0B;     /* Coin word, crypto themes, Research status */
  --accent-mint: #34D399;      /* Live status, completed builds */
  --accent-coral: #FB7185;     /* Book, human-accessible content */

  /* Borders */
  --border-soft: rgba(255, 255, 255, 0.10);
  --border-strong: rgba(255, 255, 255, 0.18);

  /* Radii */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 20px 60px rgba(0, 0, 0, 0.28);
  --shadow-glow-cyan: 0 0 40px rgba(34, 211, 238, 0.20);
  --shadow-glow-violet: 0 0 40px rgba(139, 92, 246, 0.20);

  /* Layout */
  --max-width: 1180px;
  --article-width: 760px;

  /* Signature gradient */
  --grad-primary: linear-gradient(135deg, #22D3EE 0%, #8B5CF6 60%, #FB7185 100%);

  /* Hero glow background (compose with bg-ink) */
  --hero-glow:
    radial-gradient(circle at 18% 22%, rgba(34, 211, 238, 0.16), transparent 38%),
    radial-gradient(circle at 82% 12%, rgba(139, 92, 246, 0.14), transparent 38%),
    radial-gradient(circle at 90% 85%, rgba(251, 113, 133, 0.08), transparent 45%);
}