import { Button } from '@/components/ui/button';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
import { Input } from '@/components/ui/input';

function ProductForm() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Nuevo Producto</CardTitle>
      </CardHeader>
      <CardContent>
        <Input placeholder="Nombre del producto" />
        <Button className="mt-4">Guardar</Button>
      </CardContent>
    </Card>
  );
}

<div className="
  flex flex-col
  md:flex-row md:items-center
  gap-4
  p-4
  md:p-6
">
  <h1 className="text-2xl md:text-3xl lg:text-4xl">
    Título
  </h1>
</div>

// Primary action (yellow)
<Button className="bg-yellow-400 text-2xl rounded-xl">
  Agregar al Carrito
</Button>

// Secondary
<Button variant="outline">
  Cancelar
</Button>

// Destructive
<Button variant="destructive">
  Eliminar
</Button>

// Use CSS variables for tenant-specific colors
<div 
  className="bg-[var(--tenant-primary)]"
  style={{
    '--tenant-primary': tenant.primary_color || '#ea5a17',
  }}
>
  Content
</div>