← back to IWasCute

src/app/globals.css

80 lines

@import "tailwindcss";

:root {
  --background: #FFF1E6;
  --foreground: #3D405B;

  /* Brand palette */
  --color-peach: #FFB5A7;
  --color-peach-dark: #F4846F;
  --color-sage: #B5D5C5;
  --color-sage-dark: #8BBCAA;
  --color-cream: #FFF1E6;
  --color-cream-dark: #FFE0CB;
  --color-warm-gray: #6B705C;
  --color-brown: #3D405B;
  --color-brown-light: #5A5F80;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  /* Expose brand colors to Tailwind utilities */
  --color-peach: var(--color-peach);
  --color-peach-dark: var(--color-peach-dark);
  --color-sage: var(--color-sage);
  --color-sage-dark: var(--color-sage-dark);
  --color-cream: var(--color-cream);
  --color-cream-dark: var(--color-cream-dark);
  --color-warm-gray: var(--color-warm-gray);
  --color-brown: var(--color-brown);
  --color-brown-light: var(--color-brown-light);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-geist-sans, Arial, Helvetica, sans-serif);
  overflow-x: hidden;
}

/* Smooth scrolling + prevent horizontal overflow from decorative blobs */
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

/* Custom checkbox styling */
input[type="checkbox"] {
  accent-color: var(--color-peach);
}

/* File input hiding */
input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* Drag-over highlight */
.drag-over {
  border-color: var(--color-peach-dark) !important;
  background-color: rgba(255, 181, 167, 0.1) !important;
}

/* Signature field font */
.signature-field {
  font-family: "Georgia", "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0.05em;
}