:root {
  --c-white: #ffffff;
  --c-indigo-700: #4338ca;
  --c-indigo-600: #4f46e5;
  --c-indigo-500: #6366f1;
  --c-indigo-400: #818cf8;
  --c-indigo-100: #e0e7ff;
  --c-indigo-50: #eef2ff;
  --c-slate-950: #020617;
  --c-slate-900: #0f172a;
  --c-slate-800: #1e293b;
  --c-slate-700: #334155;
  --c-slate-600: #475569;
  --c-slate-500: #64748b;
  --c-slate-400: #94a3b8;
  --c-slate-300: #cbd5e1;
  --c-slate-200: #e2e8f0;
  --c-slate-100: #f1f5f9;
  --c-slate-50: #f8fafc;
  --c-focus: rgba(79, 70, 229, .24);

  --font-sans: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --radius-8: 8px;
  --radius-12: 12px;
  --radius-16: 16px;
  --radius-20: 20px;
  --radius-24: 24px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-sm: 0 6px 18px rgba(15, 23, 42, .06);
  --shadow-md: 0 18px 44px rgba(15, 23, 42, .12);

  --container: 1340px;
  --gutter: 16px;
  --header-h: 72px;
  --bottom-nav-h: 74px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (min-width: 768px) {
  :root { --gutter: 24px; }
}

@media (min-width: 1200px) {
  :root {
    --gutter: 32px;
    --header-h: 82px;
  }
}