style.css

:root {
  /* Theme (dark default) */
  --bg: 11 15 23; /* Deep dark background */
  --fg: 244 244 245; /* text-zinc-100 */

  /* Colors (adjust to your preference) */
  --color-primary-500: 99 102 241;   /* indigo-500 */
  --color-secondary-500: 34 197 94;  /* emerald-500 */
  --color-tertiary-500: 249 115 22;  /* orange-500 */

  /* Aliases for compatibility */
  --primary: var(--color-primary-500);
  --secondary: var(--color-secondary-500);
}
/* Light theme overrides */
html.light {
  --bg: 250 250 250;
  --fg: 15 23 42;
}

/* Light theme specific adjustments */
html.light .glass-card {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.1);
}

html.light .text-zinc-100 {
  color: rgb(15, 23, 42);
}

html.light .text-zinc-200 {
  color: rgb(30, 41, 59);
}

html.light .text-zinc-300 {
  color: rgb(71, 85, 105);
}

html.light .text-zinc-400 {
  color: rgb(100, 116, 139);
}

html.light .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.1);
}

html.light .bg-white\/5 {
  background: rgba(15, 23, 42, 0.05);
}

html.light .bg-white\/10 {
  background: rgba(15, 23, 42, 0.1);
}

html.light .nav-link {
  color: rgb(71, 85, 105);
}

html.light .nav-link:hover {
  color: rgb(15, 23, 42);
  background: rgba(15, 23, 42, 0.05);
}

html.light .mobile-link {
  color: rgb(71, 85, 105);
}

html.light .mobile-link:hover {
  color: rgb(15, 23, 42);
  background: rgba(15, 23, 42, 0.05);
}
html.light input, 
html.light textarea {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(15, 23, 42, 0.15);
  color: rgb(15, 23, 42);
}

html.light input::placeholder, 
html.light textarea::placeholder {
  color: rgb(100, 116, 139);
}

html.light input.border-red-400,
html.light textarea.border-red-400 {
  border-color: rgb(239, 68, 68);
}
html.light .chip {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.1);
  color: rgb(71, 85, 105);
}
/* Form labels positioning */
.label {
  @apply block text-sm font-medium text-zinc-300 mb-2;
}

/* Error message styling */
.error-message {
  @apply text-red-400 text-sm mt-1;
}

/* Light theme label colors */
html.light .label {
  color: rgb(71, 85, 105);
}

html.light .error-message {
  color: rgb(239, 68, 68);
}
/* Button loading state */
.btn-primary:disabled {
  @apply opacity-75 cursor-not-allowed;
}

.btn-primary:disabled:hover {
  @apply scale-100;
}
* { -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  background: rgb(var(--bg));
  color: rgb(var(--fg));
}

/* Smooth fonts */
body {
  font-feature-settings: "liga" 1, "calt" 1;
}

/* Glass effect */
.glass-card {
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}

/* Links */
a { text-decoration: none; }
.nav-link {
  @apply px-3 py-2 rounded-md text-sm text-zinc-300 hover:text-white hover:bg-white/10 transition;
}
.mobile-link {
  @apply px-3 py-2 rounded-md text-zinc-300 hover:text-white hover:bg-white/10 transition;
}
/* Buttons */
.btn-primary {
  @apply inline-flex items-center gap-2 rounded-lg border border-white/10 bg-[color:rgb(var(--color-primary-500)_/_0.2)] text-[color:rgb(var(--color-primary-500))] hover:bg-[color:rgb(var(--color-primary-500)_/_0.3)] px-5 py-3 font-medium transition-all duration-200 shadow-glow hover:shadow-lg hover:scale-[1.02] relative overflow-hidden;
}
.btn-ghost {
  @apply inline-flex items-center gap-2 rounded-md border border-white/10 bg-white/5 hover:bg-white/10 text-zinc-200 hover:text-white px-4 py-2 font-medium transition-all duration-200;
}

/* Enhanced form styles */
.form-field-input {
  @apply w-full rounded-lg border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 px-4 py-3 outline-none focus:border-[color:rgb(var(--color-primary-500)_/_0.6)] focus:ring-2 focus:ring-[color:rgb(var(--color-primary-500)_/_0.2)] transition-all duration-200;
}

.form-field-input.pl-11 {
  padding-left: 2.75rem;
}

/* Form field hover and focus effects */
.form-field-input:hover {
  border-color: rgba(var(--color-primary-500), 0.3);
  background: rgba(255, 255, 255, 0.08);
}

.form-field-input:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(var(--color-primary-500), 0.15);
}

/* Enhanced error states */
.form-field-input.error {
  border-color: rgb(239, 68, 68);
  background: rgba(239, 68, 68, 0.05);
  animation: shake 0.3s ease-in-out;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* Status indicator animations */
#form-status {
  @apply transition-all duration-300;
}

#form-status .feather {
  @apply transition-all duration-300;
}

/* Success state animation */
@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

#form-status.text-emerald-400 .feather {
  animation: success-pulse 0.5s ease-in-out;
}

/* Loading state for submit button */
.btn-primary:disabled {
  @apply opacity-75 cursor-not-allowed;
  position: relative;
}

.btn-primary:disabled::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Light theme form adjustments */
html.light .form-field-input {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(15, 23, 42, 0.15);
  color: rgb(15, 23, 42);
}

html.light .form-field-input:hover {
  border-color: rgba(var(--color-primary-500), 0.3);
  background: rgba(255, 255, 255, 0.95);
}

html.light .form-field-input::placeholder {
  color: rgb(100, 116, 139);
}

html.light .form-field-input.error {
  background: rgba(239, 68, 68, 0.05);
  border-color: rgb(239, 68, 68);
}

/* Project type and budget radio button styles */
.project-type-radio input:checked + span,
.budget-radio input:checked + span {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(var(--color-primary-500), 0.15);
}

.project-type-radio input:focus-visible + span,
.budget-radio input:focus-visible + span {
  outline: 2px solid rgba(var(--color-primary-500), 0.5);
  outline-offset: 2px;
}

/* Enhanced checkbox styles */
input[type="checkbox"]:checked {
  background-color: rgb(var(--color-primary-500));
  border-color: rgb(var(--color-primary-500));
}

input[type="checkbox"]:checked::after {
  content: '✓';
  display: block;
  text-align: center;
  color: white;
  font-size: 12px;
  line-height: 16px;
}

/* Form section spacing */
.space-y-6 > * + * {
  margin-top: 1.5rem;
}

.space-y-4 > * + * {
  margin-top: 1rem;
}

.space-y-3 > * + * {
  margin-top: 0.75rem;
}

/* Light theme radio button adjustments */
html.light .project-type-radio input:checked + span,
html.light .budget-radio input:checked + span {
  background: rgba(var(--color-primary-500), 0.1);
  color: rgb(var(--color-primary-500));
}

html.light input[type="checkbox"] {
  background: rgba(15, 23, 42, 0.05);
  border-color: rgba(15, 23, 42, 0.2);
}

html.light input[type="checkbox"]:checked {
  background-color: rgb(var(--color-primary-500));
  border-color: rgb(var(--color-primary-500));
}

/* Hover effects for project type icons */
.project-type-radio:hover span i,
.budget-radio:hover span {
  transform: translateY(-1px);
  transition: all 0.2s ease;
}
/* Inputs */
.label {
  @apply block text-sm font-medium text-zinc-300 mb-2;
}
input, textarea {
  @apply w-full rounded-lg border border-white/10 bg-white/5 text-zinc-200 placeholder:text-zinc-500 px-4 py-3 outline-none focus:border-[color:rgb(var(--color-primary-500)_/_0.6)] focus:ring-2 focus:ring-[color:rgb(var(--color-primary-500)_/_0.2)] transition-all duration-200;
}

/* Chips */
.chip {
  @apply px-2.5 py-1 rounded-md border border-white/10 bg-white/5 text-xs text-zinc-300;
}

/* Selection */
::selection {
  background: rgba(var(--color-primary-500), 0.35);
  color: white;
}

/* Progress bar for scroll (optional visual candy) */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, rgb(var(--color-primary-500)), rgb(var(--color-secondary-500)));
  z-index: 60;
  transition: width 0.1s linear;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .animate-blob, .animate-float {
    animation: none !important;
  }
}

/* Typing animation styles */
.typing-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: #a78bfa;
  margin-left: 2px;
  animation: blink 1s infinite;
  vertical-align: bottom;
}

.typing-cursor.hide {
  opacity: 0;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Syntax highlighting for typing animation */
.typing-text {
  white-space: pre-wrap;
  word-break: break-word;
}

.keyword {
  color: #10b981; /* emerald-400 */
}

.string {
  color: #f59e0b; /* amber-500 */
}

.operator {
  color: #ec4899; /* pink-400 */
}

.function {
  color: #38bdf8; /* sky-400 */
}

.tag {
  color: #f87171; /* red-400 */
}
.attr {
  color: #f59e0b; /* amber-500 */
}

.comment {
  color: #6b7280; /* gray-500 */
}

.punctuation {
  color: #9ca3af; /* gray-400 */
}