@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 20px,
        #e8a5a5 20px,
        #e8a5a5 22px,
        transparent 22px
      ),
      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 20px,
        #7a4a4a 20px,
        #7a4a4a 22px,
        transparent 22px
      ),
      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%);
  }

  /* Binder divider tabs for sidebar nav */
  .binder-spine {
    position: relative;
    background-color: hsl(135 20% 74%);
    background-image: radial-gradient(
      circle at 1px 1px,
      rgba(0, 0, 0, 0.04) 1px,
      transparent 0
    );
    background-size: 4px 4px;
    box-shadow: inset -10px 0 14px -8px rgba(0, 0, 0, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
  }
  .binder-spine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    right: 8px;
    width: 1px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.18) 0 4px,
      transparent 4px 8px
    );
    pointer-events: none;
  }
  .dark .binder-spine {
    background-color: hsl(220 18% 16%);
    background-image: radial-gradient(
      circle at 1px 1px,
      rgba(255, 255, 255, 0.03) 1px,
      transparent 0
    );
    box-shadow: inset -10px 0 14px -8px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.05);
  }

  .binder-ring {
    position: absolute;
    right: 4px;
    width: 18px;
    height: 28px;
    border-radius: 9999px;
    background: linear-gradient(
      90deg,
      hsl(215 14% 55%) 0%,
      hsl(210 25% 92%) 45%,
      hsl(215 16% 50%) 100%
    );
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25),
      inset 0 0 0 2px hsl(215 14% 40%),
      inset 0 0 0 4px hsl(210 25% 88%);
    z-index: 20;
    pointer-events: none;
  }

  .binder-tab {
    position: relative;
    border-radius: 2px 10px 10px 2px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.06),
      inset 0 1px 0 rgba(255, 255, 255, 0.4);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, margin 0.18s ease;
  }
  .binder-tab::after {
    content: "";
    position: absolute;
    right: -6px;
    top: 8px;
    bottom: 8px;
    width: 6px;
    border-radius: 0 4px 4px 0;
    background: inherit;
    box-shadow: 1px 0 2px rgba(0, 0, 0, 0.08);
    opacity: 0.9;
  }
  .binder-tab:hover {
    transform: translateX(4px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 12px rgba(0, 0, 0, 0.08);
  }
  .binder-tab-active {
    transform: translateX(8px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.14), 0 8px 16px rgba(0, 0, 0, 0.1);
    font-weight: 600;
  }
  .binder-tab-active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 60%;
    background: hsl(var(--primary));
    border-radius: 2px;
  }
  /* 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;
  }
}