@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

@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%;
    --primary2: 209 100% 61%;
    --primary2-foreground: 210 40% 98%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --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;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .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%;
    --primary2: 217 100% 68%;
    --primary2-foreground: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --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% 48%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
  }
}

@layer utilities {
  /* ✅ Background & Text Colors */
  .bg-background {
    background-color: hsl(var(--background));
  }
  .text-foreground {
    color: hsl(var(--foreground));
  }

  /* ✅ Cards */
  .bg-card {
    background-color: hsl(var(--card));
  }
  .text-card-foreground {
    color: hsl(var(--card-foreground));
  }

  /* ✅ Popovers */
  .bg-popover {
    background-color: hsl(var(--popover));
  }
  .text-popover-foreground {
    color: hsl(var(--popover-foreground));
  }

  /* ✅ Primary */
  .bg-primary {
    background-color: hsl(var(--primary));
  }
  .text-primary-foreground {
    color: hsl(var(--primary-foreground));
  }

  /* ✅ Secondary */
  .bg-secondary {
    background-color: hsl(var(--secondary));
  }
  .text-secondary-foreground {
    color: hsl(var(--secondary-foreground));
  }

  /* ✅ Muted */
  .bg-muted {
    background-color: hsl(var(--muted));
  }
  .text-muted-foreground {
    color: hsl(var(--muted-foreground));
  }

  /* ✅ Accent */
  .bg-accent {
    background-color: hsl(var(--accent));
  }
  .text-accent-foreground {
    color: hsl(var(--accent-foreground));
  }

  /* ✅ Destructive (Danger/Error) */
  .bg-destructive {
    background-color: hsl(var(--destructive));
  }
  .text-destructive-foreground {
    color: hsl(var(--destructive-foreground));
  }

  /* ✅ Borders */
  .border {
    border-color: hsl(var(--border));
  }
  .border-t {
    border-top-color: hsl(var(--border));
  }
  .border-b {
    border-bottom-color: hsl(var(--border));
  }
  .border-l {
    border-left-color: hsl(var(--border));
  }
  .border-r {
    border-right-color: hsl(var(--border));
  }

  /* ✅ Input Borders */
  .border-input {
    border-color: hsl(var(--input));
  }

  /* ✅ Focus Ring */
  .ring {
    box-shadow: 0 0 0 3px hsl(var(--ring) / 0.5);
  }

  /* ✅ Radius */
  .rounded {
    border-radius: var(--radius);
  }
  .rounded-md {
    border-radius: calc(var(--radius) * 0.75);
  }
  .rounded-lg {
    border-radius: calc(var(--radius) * 1.25);
  }
  .rounded-xl {
    border-radius: calc(var(--radius) * 1.5);
  }

  /* ✅ Charts */
  .bg-chart-1 {
    background-color: hsl(var(--chart-1));
  }
  .bg-chart-2 {
    background-color: hsl(var(--chart-2));
  }
  .bg-chart-3 {
    background-color: hsl(var(--chart-3));
  }
  .bg-chart-4 {
    background-color: hsl(var(--chart-4));
  }
  .bg-chart-5 {
    background-color: hsl(var(--chart-5));
  }

  /* ✅ Cursor */
  button {
    cursor: pointer;
  }

  button.colored {
    color: hsl(var(--primary2-foreground));
  }

  /* ✅ Active Tab Styling */
  button[data-state="active"] {
    color: hsl(var(--destructive-foreground));
    background: hsl(var(--primary));
  }

  /* ✅ Inactive Tab Styling */
  button[data-state="inactive"] {
    color: hsl(var(--primary-secondary));
    background: hsl(var(--secondary));
  }

  .signupBtn, .signinBtn {
    color: hsl(var(--destructive-foreground));
  }

  .signinBtn:hover, .signupBtn:hover {
    color: hsl(var(--destructive-foreground));
    background: hsl(var(--primary2));
  }

  .oauthBtn:hover {
    color: hsl(var(--foreground));
    background: hsl(var(--secondary));
  }
}


/* Tiptap Editor Styles */
.ProseMirror:focus {
  outline: none;
}

.ProseMirror p {
  margin-bottom: 0.75em;
}

.ProseMirror h1 {
  font-size: 1.5em;
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-top: 1em;
}

.ProseMirror h2 {
  font-size: 1.25em;
  font-weight: bold;
  margin-bottom: 0.5em;
  margin-top: 1em;
}

.ProseMirror ul {
  list-style-type: disc;
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}

.ProseMirror ol {
  list-style-type: decimal;
  padding-left: 1.5em;
  margin-bottom: 0.75em;
}

.ProseMirror blockquote {
  border-left: 3px solid #e2e8f0;
  padding-left: 1em;
  margin-left: 0;
  margin-right: 0;
  font-style: italic;
}

.ProseMirror code {
  background-color: #f1f5f9;
  padding: 0.2em 0.4em;
  border-radius: 0.25em;
  font-family: monospace;
}

.ProseMirror pre {
  background-color: #1e293b;
  color: #f8fafc;
  padding: 0.75em 1em;
  border-radius: 0.25em;
  overflow-x: auto;
  margin-bottom: 0.75em;
}

.ProseMirror pre code {
  background-color: transparent;
  padding: 0;
  color: inherit;
}

.ProseMirror img {
  max-width: 100%;
  height: auto;
}

.ProseMirror a {
  color: #3b82f6;
  text-decoration: underline;
}

