Styling

// Standard Construct wrapper
<div className="min-h-screen bg-background p-4 sm:p-6">
  <Card className="mx-auto max-w-md">
    {/* Content */}
  </Card>
</div>

// For wider Constructs
<div className="min-h-screen bg-background p-4 sm:p-6">
  <Card className="mx-auto max-w-2xl">
    {/* Content */}
  </Card>
</div>

// Responsive padding
<div className="p-4 sm:p-6 lg:p-8">

// Responsive grid
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">

// Responsive text
<h1 className="text-xl sm:text-2xl lg:text-3xl">

// Hide on mobile
<div className="hidden sm:block">

// Show only on mobile
<div className="block sm:hidden">

// Vertical spacing between elements
<div className="space-y-4">
  <Element />
  <Element />
</div>

// Horizontal spacing
<div className="flex gap-4">
  <Element />
  <Element />
</div>

// Common patterns
<CardContent className="space-y-4">     // 16px between items
<CardContent className="space-y-6">     // 24px between sections

// Padding
<div className="p-4">                    // 16px all sides
<div className="px-4 py-2">              // 16px horizontal, 8px vertical

// Option 1: CSS Variables (recommended)
// These automatically adapt to the theme
<div className="bg-background text-foreground">
<div className="border-border">
<p className="text-muted-foreground">

// Available CSS variable colors:
// bg-background      - Main background
// bg-card            - Card background
// bg-muted           - Muted background
// bg-accent          - Accent background
// bg-primary         - Primary color
// bg-destructive     - Error/delete color

// text-foreground    - Main text
// text-muted-foreground - Secondary text
// text-primary       - Primary color text

// border-border      - Default borders

// Option 2: dark: prefix
<div className="bg-white dark:bg-zinc-900">
<p className="text-gray-900 dark:text-gray-100">

<div className="flex items-center gap-3 rounded-lg border p-3">
  <Checkbox />
  <span className="flex-1">{text}</span>
  <Button variant="ghost" size="icon">
    <Trash2 className="h-4 w-4" />
  </Button>
</div>

<div className="space-y-2">
  <Label htmlFor="name">Name</Label>
  <Input id="name" />
</div>

<div className="flex gap-2">
  <Input placeholder="Add item..." className="flex-1" />
  <Button>
    <Plus className="h-4 w-4" />
  </Button>
</div>

{items.length === 0 && (
  <div className="py-12 text-center">
    <Package className="mx-auto h-12 w-12 text-muted-foreground" />
    <p className="mt-4 text-sm text-muted-foreground">
      No items yet. Add one above!
    </p>
  </div>
)}

<div className="grid gap-4 sm:grid-cols-3">
  <Card>
    <CardContent className="pt-6">
      <p className="text-2xl font-bold">{total}</p>
      <p className="text-sm text-muted-foreground">Total Items</p>
    </CardContent>
  </Card>
  {/* More stat cards */}
</div>