:root {
  --yellow: #ffc94a;
  --yellow-dim: #fff5d6;
  --yellow-deep: #ecae00;
  --coral: #fa8669;
  --coral-dim: #ffe8e0;
  --indigo: #4f46e5;
  --indigo-dim: #eef2ff;
  --green: #16a34a;
  --green-dim: #dcfce7;
  --red: #dc2626;
  --red-dim: #fee2e2;

  --black: #0f172a;
  --black-deep: #06091a;
  --white: #ffffff;
  --bg-paper: #fafaf7;
  --bg-section: #f5f5f0;
  --border-soft: #e6e6e0;

  --text-primary: #0a0e1a;
  --text-secondary: #4a5568;
  --text-tertiary: #6b7280;

  --g-100: #f3f4f6;
  --g-200: #e5e7eb;
  --g-300: #d1d5db;
  --g-400: #9ca3af;
  --g-500: #6b7280;
  --g-600: #4b5563;
  --g-700: #374151;
  --g-900: #111827;

  --font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Manrope', 'Inter', -apple-system, sans-serif;

  --radius-1: 6px;
  --radius-2: 10px;
  --radius-3: 16px;

  --shadow-hard-y: 8px 8px 0 var(--yellow);
  --shadow-hard-c: 8px 8px 0 var(--coral);
  --shadow-hard-b: 8px 8px 0 var(--black);
  --shadow-hard-i: 8px 8px 0 var(--indigo);
  --shadow-hard-soft: 4px 4px 0 var(--yellow);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}