/* ==========================================================================
   Design Tokens — Bento Grid Monochrome
   ========================================================================== */

:root {
  /* Backgrounds — high contrast between page and cards */
  --color-bg-page: #050505;
  --color-bg-card: #111111;
  --color-bg-card-hover: #181818;
  --color-bg-input: #0a0a0a;

  /* Text */
  --color-text-primary: #c8c8c8;
  --color-text-secondary: #888888;
  --color-text-heading: #ffffff;
  --color-text-muted: #666666;

  /* Borders — visible! */
  --color-border: #252525;
  --color-border-hover: #404040;
  --color-border-strong: #555555;

  /* Cards */
  --radius-card: 16px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-full: 9999px;
  --card-padding: 1.75rem;
  --gap-bento: 12px;

  /* Shadows */
  --shadow-card: 0 2px 8px rgba(0,0,0,0.5);
  --shadow-glow: 0 0 20px rgba(255,255,255,0.08);

  /* Gradients */
  --gradient-accent: linear-gradient(135deg, #fff 0%, #888 100%);

  /* Transitions */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Typography */
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Z-index */
  --z-cursor: 9999;
  --z-mobile-nav: 200;
  --z-nav-toggle: 210;
  --z-header: 100;
  --z-overlay: 50;
}