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

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 210 40% 98%;
    --foreground: 215 25% 15%;

    --card: 0 0% 100%;
    --card-foreground: 215 25% 15%;

    --popover: 0 0% 100%;
    --popover-foreground: 215 25% 15%;

    --primary: 189 85% 42%;
    --primary-foreground: 0 0% 100%;

    --secondary: 189 60% 95%;
    --secondary-foreground: 189 85% 25%;

    --muted: 210 40% 96%;
    --muted-foreground: 215 16% 47%;

    --accent: 189 43% 74.5%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 84% 60%;
    --destructive-foreground: 0 0% 100%;

    --border: 214 32% 91%;
    --input: 214 32% 91%;
    --ring: 189 85% 42%;

    --radius: 0.75rem;

    --success: 142 71% 45%;
    --success-foreground: 0 0% 100%;

    --sidebar-width: 280px;

    --sidebar-background: 0 0% 98%;

    --sidebar-foreground: 240 5.3% 26.1%;

    --sidebar-primary: 240 5.9% 10%;

    --sidebar-primary-foreground: 0 0% 98%;

    --sidebar-accent: 240 4.8% 95.9%;

    --sidebar-accent-foreground: 240 5.9% 10%;

    --sidebar-border: 220 13% 91%;

    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 220 25% 12%;
    --foreground: 210 40% 98%;

    --card: 220 23% 15%;
    --card-foreground: 210 40% 98%;

    --popover: 220 23% 15%;
    --popover-foreground: 210 40% 98%;

    --primary: 189 85% 45%;
    --primary-foreground: 0 0% 100%;

    --secondary: 220 20% 20%;
    --secondary-foreground: 210 40% 98%;

    --muted: 220 20% 20%;
    --muted-foreground: 215 20% 65%;

    --accent: 14 88% 60%;
    --accent-foreground: 0 0% 100%;

    --destructive: 0 63% 31%;
    --destructive-foreground: 210 40% 98%;

    --border: 220 20% 25%;
    --input: 220 20% 25%;
    --ring: 189 85% 45%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* Notebook paper background */
  .notebook-bg {
    background-color: #fefcf5;
    background-image: linear-gradient(
        to right,
        transparent 0px,
        transparent 39px,
        #e8a5a5 39px,
        #e8a5a5 41px,
        transparent 41px
      ),
      repeating-linear-gradient(
        transparent 0px,
        transparent 31px,
        #d8e3f0 31px,
        #d8e3f0 32px
      );
    background-size: 100% 32px;
    background-position: 0 8px;
  }

  .dark .notebook-bg {
    background-color: #2a2a2a;
    background-image: linear-gradient(
        to right,
        transparent 0px,
        transparent 39px,
        #7a4a4a 39px,
        #7a4a4a 41px,
        transparent 41px
      ),
      repeating-linear-gradient(
        transparent 0px,
        transparent 31px,
        #3a4a5a 31px,
        #3a4a5a 32px
      );
  }

  /* Enhanced post-it note base styles */
  .post-it-note {
    border-radius: 2px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.08),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .post-it-note::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
      90deg,
      transparent,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    border-radius: 2px;
  }

  /* Post-it note color classes */
  .post-it-yellow {
    background-color: hsl(48 100% 88%);
  }

  .post-it-pink {
    background-color: hsl(330 100% 90%);
  }

  .post-it-blue {
    background-color: hsl(200 100% 90%);
  }

  .post-it-green {
    background-color: hsl(120 60% 85%);
  }

  .post-it-orange {
    background-color: hsl(30 100% 85%);
  }

  .post-it-purple {
    background-color: hsl(270 60% 90%);
  }

  .post-it-red {
    background-color: hsl(0 100% 90%);
  }
  /* Post-it note rotation classes */
  .rotate-post-it-1 {
    transform: rotate(1deg);
  }

  .rotate-post-it-2 {
    transform: rotate(-1deg);
  }

  .rotate-post-it-3 {
    transform: rotate(2deg);
  }

  .rotate-post-it-4 {
    transform: rotate(-2deg);
  }

  /* Tape effect for top of post-it notes */
  .post-it-tape::after {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 20px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
  }

  /* DOCX Preview Styles */
  .docx-wrapper {
    background: white;
    padding: 2rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Calibri', 'Arial', sans-serif;
  }

  .docx-wrapper table {
    border-collapse: collapse;
    width: 100%;
    margin: 1rem 0;
  }

  .docx-wrapper table td,
  .docx-wrapper table th {
    border: 1px solid hsl(var(--border));
    padding: 8px;
    text-align: left;
  }

  .docx-wrapper table th {
    background-color: hsl(var(--muted));
    font-weight: 600;
  }

  .docx-wrapper p {
    margin: 0.5rem 0;
    line-height: 1.6;
  }

  .docx-wrapper h1,
  .docx-wrapper h2,
  .docx-wrapper h3,
  .docx-wrapper h4,
  .docx-wrapper h5,
  .docx-wrapper h6 {
    margin-top: 1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: hsl(var(--foreground));
  }

  .docx-wrapper ul,
  .docx-wrapper ol {
    margin: 0.5rem 0;
    padding-left: 2rem;
  }

  .docx-wrapper li {
    margin: 0.25rem 0;
  }
}