@import "tailwindcss";

@theme {
  /* Primary brand color - sage/teal blue */
  --color-primary-50: #f3f7f7;
  --color-primary-100: #e0ebe9;
  --color-primary-200: #c1d7d4;
  --color-primary-300: #9dbcb9;
  --color-primary-400: #7d9d9c;
  --color-primary-500: #658784;
  --color-primary-600: #576f72;
  --color-primary-700: #485a5c;
  --color-primary-800: #3d4b4d;
  --color-primary-900: #353f41;
  --color-primary-950: #1c2527;

  /* Secondary/Background - sand/cream */
  --color-secondary-50: #fafafa;
  --color-secondary-100: #f5f5f5;
  --color-secondary-200: #f2f2f2;
  --color-secondary-300: #e8e8e8;
  --color-secondary-400: #d4d4d4;
  --color-secondary-500: #a3a3a3;
  --color-secondary-600: #737373;
  --color-secondary-700: #525252;
  --color-secondary-800: #404040;
  --color-secondary-900: #262626;

  /* Neutral/Dark - charcoal */
  --color-dark-50: #f7f7f7;
  --color-dark-100: #e3e3e3;
  --color-dark-200: #c8c8c8;
  --color-dark-300: #a4a4a4;
  --color-dark-400: #818181;
  --color-dark-500: #666666;
  --color-dark-600: #515151;
  --color-dark-700: #434343;
  --color-dark-800: #383838;
  --color-dark-900: #222222;
  --color-dark-950: #0a0a0a;
}

/* Custom utility classes for our palette */
@utility bg-primary-* {
  background-color: var(--color-primary-*);
}
@utility text-primary-* {
  color: var(--color-primary-*);
}
@utility border-primary-* {
  border-color: var(--color-primary-*);
}
@utility ring-primary-* {
  --tw-ring-color: var(--color-primary-*);
}
@utility bg-secondary-* {
  background-color: var(--color-secondary-*);
}
@utility text-secondary-* {
  color: var(--color-secondary-*);
}
@utility border-secondary-* {
  border-color: var(--color-secondary-*);
}
@utility bg-dark-* {
  background-color: var(--color-dark-*);
}
@utility text-dark-* {
  color: var(--color-dark-*);
}
@utility border-dark-* {
  border-color: var(--color-dark-*);
}