@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 221.2 83.2% 53.3%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96%;
    --secondary-foreground: 222.2 84% 4.9%;
    --muted: 210 40% 96%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96%;
    --accent-foreground: 222.2 84% 4.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 221.2 83.2% 53.3%;
    --radius: 0.5rem;
  }

  .dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 217.2 91.2% 59.8%;
    --primary-foreground: 222.2 84% 4.9%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 224.3 76.3% 94.1%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }
  body {
    background-image: radial-gradient(circle at top, rgba(99, 102, 241, 0.15), transparent 45%),
      radial-gradient(circle at 20% 20%, rgba(16, 185, 129, 0.12), transparent 35%),
      radial-gradient(circle at 80% 0%, rgba(236, 72, 153, 0.15), transparent 45%),
      linear-gradient(180deg, hsl(var(--background)), hsl(var(--background)));
    color: hsl(var(--foreground));
    min-height: 100vh;
  }
}

[contenteditable][data-placeholder]:empty:before {
  content: attr(data-placeholder);
  color: hsl(var(--muted-foreground));
  opacity: 0.8;
}

.rich-text {
  font-size: 0.95rem;
  line-height: 1.75rem;
}

.rich-text p {
  margin-bottom: 0.75rem;
}

.rich-text ul,
.rich-text ol {
  margin-left: 1.25rem;
  margin-bottom: 0.75rem;
}

.rich-text ul {
  list-style: disc;
}

.rich-text ol {
  list-style: decimal;
}

.rich-text img {
  border-radius: 0.5rem;
  margin: 1rem 0;
  max-width: 100%;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

input:not([type="checkbox"]):not([type="radio"]),
textarea,
select {
  border-radius: 0.9rem;
  border: 1px solid hsl(var(--border));
  background-color: hsla(var(--card), 0.9);
  width: 100%;
  padding: 0.65rem 0.95rem;
  font-size: 0.95rem;
  font-family: inherit;
  transition: border 0.2s ease, box-shadow 0.2s ease, background-color 0.3s ease;
  color: hsl(var(--foreground));
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

input:not([type="checkbox"]):not([type="radio"]):focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: hsl(var(--primary));
  box-shadow: 0 0 0 3px hsl(var(--primary) / 0.25);
  background-color: hsl(var(--card));
}

label {
  color: hsl(var(--foreground));
  font-weight: 500;
}