:root {
  /* ── Gray Scale ── */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ── Brand ── */
  --brand-primary:   #111827;
  --brand-accent:    #111827;
  --brand-accent-lt: #fff7ed;
  --brand-green:     #22c55e;

  /* ── Semantic ── */
  --text-primary:   var(--gray-900);
  --text-secondary: var(--gray-500);
  --text-muted:     var(--gray-400);
  --bg-body:        #ffffff;
  --bg-surface:     var(--gray-50);
  --bg-card:        #ffffff;
  --border:         var(--gray-200);

  /* ── Typography ── */
  --font-family: 'Plus Jakarta Sans', sans-serif;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semibold:600;
  --font-weight-bold:    700;
  --font-weight-extrabold: 800;

  /* ── Font Sizes ── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;

  /* ── Spacing ── */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* ── Radii ── */
  --radius-sm:  0.375rem;
  --radius-md:  0.625rem;
  --radius-lg:  1rem;
  --radius-xl:  1.25rem;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 10px 32px rgba(0,0,0,.10);
  --shadow-card: 0 2px 8px rgba(0,0,0,.06);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* ── Layout ── */
  --container-max: 1200px;
  --container-pad: var(--space-6);

  /* ── Grid columns ── */
  --grid-cols: 4;
  --grid-gap:  var(--space-6);
}

@media (min-width: 640px)  { :root { --grid-cols: 8;  } }
@media (min-width: 1024px) { :root { --grid-cols: 12; } }