@import "tailwindcss";

@utility spacing {
  .w-*: width: *;
  .h-*: height: *;
  .p-*: padding: *;
  .pt-*: padding-top: *;
  .pb-*: padding-bottom: *;
  .pl-*: padding-left: *;
  .pr-*: padding-right: *;
  .px-*: padding-left: *; padding-right: *;
  .py-*: padding-top: *; padding-bottom: *;
  .m-*: margin: *;
  .mt-*: margin-top: *;
  .mb-*: margin-bottom: *;
  .ml-*: margin-left: *;
  .mr-*: margin-right: *;
  .mx-*: margin-left: *; margin-right: *;
  .my-*: margin-top: *; margin-bottom: *;
}

body {
  @apply bg-background text-foreground;
}

@theme {
  --color-background: #ffffff;
  --color-foreground: red;
  
  --color-primary: #18181b;
  --color-primary-foreground: #fafafa;
  
  --color-secondary: #f4f4f5;
  --color-secondary-foreground: #18181b;
  
  --color-muted: #f4f4f5;
  --color-muted-foreground: #71717a;
  
  --color-destructive: #ef4444;
  --color-destructive-foreground: #fafafa;
  
  --color-border: #e4e4e7;
  --color-input: #e4e4e7;
  --color-ring: #18181b;
}

h1 {
  @apply text-2xl font-bold;
}

h2 {
  @apply text-xl font-bold;
}

h3 {
  @apply text-lg font-bold;
}

h4 {
  @apply text-sm;
}

h5 {
  @apply text-xs;
}
