/* Form input component */
.form-input {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius) - 4px);
  border: 1px solid hsl(var(--input));
  background-color: hsl(var(--background));
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  color: hsl(var(--foreground));
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-input:focus {
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 2px hsl(var(--primary) / 0.2);
}
.form-input::placeholder {
  color: hsl(var(--muted-foreground));
}
/* Additional missing classes */

/* Missing size classes (not in compiled Tailwind) */
.w-2   { width:  0.5rem; }   .h-2   { height:  0.5rem; }
.w-2\.5{ width: 0.625rem; }  .h-2\.5{ height: 0.625rem; }
.w-3   { width:  0.75rem; }  .h-3   { height:  0.75rem; }
.w-7   { width:  1.75rem; }  .h-7   { height:  1.75rem; }
.w-9   { width:  2.25rem; }  .h-9   { height:  2.25rem; }
.w-11  { width:  2.75rem; }  .h-11  { height:  2.75rem; }

/* Aspect ratio */
.aspect-square { aspect-ratio: 1 / 1; }
.aspect-video { aspect-ratio: 16 / 9; }

/* Scale transforms */
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:scale-\[1\.02\]:hover { transform: scale(1.02); }

/* Ring / shadow */
.ring-1 { box-shadow: 0 0 0 1px hsl(var(--primary) / 0.2); }
.ring-primary\/20 { --tw-ring-color: hsl(var(--primary) / 0.2); }

/* Min sizes */
.min-h-\[88px\] { min-height: 88px; }
.min-w-\[240px\] { min-width: 240px; }
.max-w-6xl { max-width: 72rem; }
.max-w-xl { max-width: 36rem; }

/* Grid spans */
.col-span-2 { grid-column: span 2 / span 2; }

/* Opacity variants */
.opacity-50 { opacity: 0.5; }

/* Cursor */
.cursor-not-allowed { cursor: not-allowed; }
.disabled\:opacity-50:disabled { opacity: 0.5; }
.disabled\:cursor-not-allowed:disabled { cursor: not-allowed; }

/* Text */
.text-destructive { color: hsl(var(--destructive)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }
.bg-destructive\/10 { background-color: hsl(var(--destructive) / 0.1); }
.border-destructive\/20 { border-color: hsl(var(--destructive) / 0.2); }

/* Misc */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hover\:bg-muted\/80:hover { background-color: hsl(var(--muted) / 0.8); }
.backdrop-blur-sm { backdrop-filter: blur(4px); }

/* Animations */
.animate-spin { animation: spin 1s linear infinite; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* Color utilities missing from compiled CSS */
.bg-foreground  { background-color: hsl(var(--foreground)); }
.text-background { color: hsl(var(--background)); }
.bg-foreground\/90 { background-color: hsl(var(--foreground) / 0.9); }

/* Typography */
.tracking-wider { letter-spacing: 0.05em; }
.tracking-wide  { letter-spacing: 0.025em; }

/* Spacing — sizes missing from compiled CSS */
.py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-14  { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.gap-8  { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
@media (min-width: 768px) {
  .md\:py-10  { padding-top: 2.5rem; padding-bottom: 2.5rem; }
  .md\:py-14  { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .md\:gap-10 { gap: 2.5rem; }
}
@media (min-width: 640px) {
  .sm\:text-right  { text-align: right; }
  .sm\:col-span-2  { grid-column: span 2 / span 2; }
  .sm\:col-span-3  { grid-column: span 3 / span 3; }
  .sm\:items-center { align-items: center; }
  .sm\:py-0 { padding-top: 0; padding-bottom: 0; }
}

/* Responsive grid additions */
@media (min-width: 768px) {
  /* Grid */
  .md\:col-span-1 { grid-column: span 1 / span 1; }
  .md\:col-span-3 { grid-column: span 3 / span 3; }
  .md\:col-span-2 { grid-column: span 2 / span 2; }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .md\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .md\:grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  /* Sizes */
  .md\:w-2   { width:  0.5rem; }  .md\:h-2   { height:  0.5rem; }
  .md\:w-2\.5{ width: 0.625rem; } .md\:h-2\.5{ height: 0.625rem; }
  .md\:w-3   { width:  0.75rem; } .md\:h-3   { height:  0.75rem; }
  .md\:w-3\.5{ width: 0.875rem; } .md\:h-3\.5{ height: 0.875rem; }
  .md\:w-8   { width:  2rem; }    .md\:h-8   { height:  2rem; }
  .md\:w-12  { width:  3rem; }
  /* Spacing */
  .md\:gap-1 { gap: 0.25rem; }
  .md\:gap-1\.5 { gap: 0.375rem; }
  /* Position */
  .md\:top-2 { top: 0.5rem; }
  .md\:left-2 { left: 0.5rem; }
  /* Text */
  .md\:text-\[9px\] { font-size: 9px; }
  .md\:text-\[10px\] { font-size: 10px; }
  /* Min */
  .md\:min-w-\[80px\] { min-width: 80px; }
}

:root {
  /* Soft pink pastel theme for mom & baby */
  --background: 340 60% 99%;
  --foreground: 340 40% 20%;

  --card: 0 0% 100%;
  --card-foreground: 340 40% 20%;

  --popover: 0 0% 100%;
  --popover-foreground: 340 40% 20%;

  /* Rose gold / Soft pink primary */
  --primary: 340 75% 65%;
  --primary-foreground: 0 0% 100%;
  --primary-glow: 340 85% 75%;

  /* Cream / warm secondary */
  --secondary: 35 80% 92%;
  --secondary-foreground: 340 40% 20%;

  /* Muted pastels */
  --muted: 340 40% 97%;
  --muted-foreground: 340 15% 45%;

  /* Accent pink */
  --accent: 340 100% 96%;
  --accent-foreground: 340 75% 55%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 340 25% 93%;
  --input: 340 25% 93%;
  --ring: 340 75% 65%;

  --radius: 1.2rem;

  /* Soft shadows */
  --shadow-soft: 0 4px 24px hsl(340 50% 80% / 0.12);
  --shadow-card: 0 8px 32px hsl(340 50% 70% / 0.08);
  --shadow-hover: 0 12px 40px hsl(340 60% 65% / 0.15);
}

.dark {
  --background: 340 30% 8%;
  --foreground: 28 60% 95%;

  --card: 340 25% 12%;
  --card-foreground: 28 60% 95%;

  --popover: 340 25% 12%;
  --popover-foreground: 28 60% 95%;

  --primary: 340 82% 52%;
  --primary-foreground: 0 0% 100%;

  --secondary: 340 20% 18%;
  --secondary-foreground: 28 60% 95%;

  --muted: 340 20% 18%;
  --muted-foreground: 28 30% 65%;

  --accent: 340 20% 18%;
  --accent-foreground: 28 60% 95%;

  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 100%;

  --border: 340 20% 18%;
  --input: 340 20% 18%;
  --ring: 340 82% 52%;
}