:root {
  /* Colors */
  --color-primary:      #0a0a0a;
  --color-secondary:    #6b7280;
  --color-accent:       #0071e3;
  --color-accent-hover: #005bb5;
  --color-bg:           #ffffff;
  --color-surface:      #ffffff;
  --color-muted:        #f7f8fa;
  --color-border:       #e5e7eb;
  --color-dark:         #0a0a0a;
  --color-dark-surface: #141414;

  /* Typography */
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-system:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Type scale */
  --text-xs:      0.75rem;
  --text-sm:      0.8125rem;
  --text-base:    1rem;
  --text-lg:      1.125rem;
  --text-xl:      1.25rem;
  --text-2xl:     1.5rem;
  --text-3xl:     2rem;
  --text-4xl:     2.5rem;
  --text-display: 3.75rem;

  /* Border radius */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   20px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card:  0 1px 3px rgba(0,0,0,0.06), 0 4px 16px rgba(0,0,0,0.06);
  --shadow-hover: 0 8px 32px rgba(0,113,227,0.12);
  --shadow-game:  0 8px 40px rgba(0,0,0,0.18);

  /* Layout */
  --nav-height:  72px;
  --section-pad: 6rem 5%;
  --max-width:   1200px;

  /* Backwards-compat aliases — referenced by blog.css and other legacy CSS */
  --primary-color:   var(--color-primary);
  --secondary-color: var(--color-secondary);
  --accent-color:    var(--color-accent);
  --heading-font:    var(--font-display);
  --body-font:       var(--font-body);
  --gradient-bg:     var(--color-muted);
}