@import 'tailwindcss';

@custom-variant dark (&:is(.dark *));

@theme {
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));
  --color-primary-hover: hsl(-var(--background-primary-hover));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));
  --color-muted-hover: hsl(var(--background-muted-hover));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-text: hsl(var(--text-default));
  --color-text-inverse: hsl(var(--text-inverse));
  --color-text-muted: hsl(var(--text-muted));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));

  --color-chart-1: hsl(var(--chart-1));
  --color-chart-2: hsl(var(--chart-2));
  --color-chart-3: hsl(var(--chart-3));
  --color-chart-4: hsl(var(--chart-4));
  --color-chart-5: hsl(var(--chart-5));

  --color-sidebar: hsl(var(--sidebar-background));
  --color-sidebar-foreground: hsl(var(--sidebar-foreground));
  --color-sidebar-primary: hsl(var(--sidebar-primary));
  --color-sidebar-primary-foreground: hsl(var(--sidebar-primary-foreground));
  --color-sidebar-accent: hsl(var(--sidebar-accent));
  --color-sidebar-accent-foreground: hsl(var(--sidebar-accent-foreground));
  --color-sidebar-border: hsl(var(--sidebar-border));
  --color-sidebar-ring: hsl(var(--sidebar-ring));

  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;
  --animate-marquee: marquee var(--duration, 20s) linear infinite;
  --animate-marquee-vertical: marquee-vertical var(--duration) linear infinite;

  @keyframes accordion-down {
    from {
      height: 0;
    }
    to {
      height: var(--radix-accordion-content-height);
    }
  }
  @keyframes accordion-up {
    from {
      height: var(--radix-accordion-content-height);
    }
    to {
      height: 0;
    }
  }
  @keyframes marquee {
    from {
      transform: translateX(0);
    }
    to {
      transform: translateX(calc(-100% - var(--gap)));
    }
  }
  @keyframes marquee-vertical {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(calc(-100% - var(--gap)));
    }
  }
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

@layer utilities {
  html,
  body,
  :root {
    height: 100%;
  }
}

@layer base {
  :root {
    --background: var(--background-default);
    --foreground: var(--text-default);
    --card: var(--background-default);
    --card-foreground: var(--text-default);
    --popover: var(--background-default);
    --popover-foreground: var(--text-default);
    --primary: var(--background-primary);
    --primary-foreground: var(--text-inverse);
    --secondary: var(--background-muted);
    --secondary-foreground: var(--text-default);
    --muted: var(--background-muted);
    --muted-foreground: var(--text-muted);
    --accent: var(--background-muted);
    --accent-foreground: var(--text-default);
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: var(--text-inverse);
    --border: var(--border-default);
    --input: var(--border-default);
    --ring: var(--background-primary);
    --radius: 0.5rem;

    /* FRAMER HSL LIGHT COLORS */
    --text-default: 200 10% 6%;
    --text-inverse: 0 0% 100%;
    --text-muted: 200 10% 6% / 60%;
    --text-inverse-muted: 0 0% 100% / 60%;
    --background-default: 0 0% 100%;
    --background-default-hover: 0 0% 96%;
    --background-muted: 0 0% 96%;
    --background-muted-hover: 0 0% 93%;
    --background-primary: 200 9% 6%;
    --background-primary-hover: 195 8% 10%;
    --border-default: 180 12% 92%;
    --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%;

    --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: var(--background-default);
    --foreground: var(--text-default);
    --card: var(--background-default);
    --card-foreground: var(--text-default);
    --popover: var(--background-default);
    --popover-foreground: var(--text-default);
    --primary: var(--background-primary);
    --primary-foreground: var(--text-inverse);
    --secondary: var(--background-muted);
    --secondary-foreground: var(--text-default);
    --muted: var(--background-muted);
    --muted-foreground: var(--text-muted);
    --accent: var(--background-muted);
    --accent-foreground: var(--text-default);
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: var(--text-inverse);
    --border: var(--border-default);
    --input: var(--border-default);
    --ring: var(--background-primary);

    /* FRAMER HSL DARK COLORS */
    --text-default: 0 0% 100%;
    --text-inverse: 200 10% 6%;
    --text-muted: 0 0% 100%;
    --text-inverse-muted: 200 10% 6%;
    --background-default: 200 10% 6%;
    --background-default-hover: 0 0% 0%;
    --background-muted: 0 0% 12%;
    --background-muted-hover: 0 0% 16%;
    --background-primary: 0 0% 100%;
    --background-primary-hover: 0 0% 96%;
    --border-default: 200 4% 15%;
    --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%;

    --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%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

@layer utilities {
  /* THEME TRANSITION */
  ::view-transition-group(root) {
    animation-duration: 1.25s;
  }

  ::view-transition-new(root),
  ::view-transition-old(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-new(root) {
    animation-name: reveal-light;
  }

  ::view-transition-old(root),
  .dark::view-transition-old(root) {
    animation: none;
  }

  .dark::view-transition-new(root) {
    animation-name: reveal-dark;
  }

  @keyframes reveal-dark {
    from {
      clip-path: polygon(-30% 0, -30% 0, -15% 100%, -10% 115%);
    }
    to {
      clip-path: polygon(-30% 0, 130% 0, 115% 100%, -10% 115%);
    }
  }

  @keyframes reveal-light {
    from {
      clip-path: polygon(130% 0, 130% 0, 115% 100%, 110% 115%);
    }
    to {
      clip-path: polygon(130% 0, -30% 0, -15% 100%, 110% 115%);
    }
  }

  /* Basic editor styles */
  .tiptap {
    /* List styles */
    ul,
    ol {
      padding: 0 1rem;
      margin: 1.25rem 1rem 1.25rem 0.4rem;
    }

    ul li {
      list-style-type: disc;

      p {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }
    }

    ol li {
      list-style-type: decimal;

      p {
        margin-top: 0.25em;
        margin-bottom: 0.25em;
      }
    }

    /* Task list specific styles */
    ul[data-type='taskList'] {
      list-style: none;
      margin-left: 0;
      padding: 0;

      li {
        align-items: flex-start;
        display: flex;

        > label {
          flex: 0 0 auto;
          margin-right: 0.5rem;
          user-select: none;
        }

        > div {
          flex: 1 1 auto;
        }
      }

      input[type='checkbox'] {
        cursor: pointer;
      }

      ul[data-type='taskList'] {
        margin: 0;
      }
    }

    /* Heading styles */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 2.25rem;
      margin-top: 2.5rem;
      text-wrap: pretty;
    }

    h1,
    h2 {
      margin-top: 3.5rem;
      margin-bottom: 1.5rem;
    }

    h1 {
      font-size: 1.875rem;
    }

    h2 {
      font-size: 1.5rem;
    }

    h3 {
      font-size: 1.25rem;
    }

    h4,
    h5,
    h6 {
      font-size: 1rem;
    }

    /* Table-specific styling */
    table {
      border-collapse: collapse;
      margin: 0;
      overflow: hidden;
      table-layout: fixed;
      width: 100%;

      td,
      th {
        border: 1px solid black;
        box-sizing: border-box;
        min-width: 1em;
        padding: 6px 8px;
        position: relative;
        vertical-align: top;

        > * {
          margin-bottom: 0;
        }
      }

      th {
        background-color: #c7c7c7;
        font-weight: bold;
        text-align: left;
      }

      .selectedCell:after {
        background: #c7c7c8;
        content: '';
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        pointer-events: none;
        position: absolute;
        z-index: 2;
      }

      .column-resize-handle {
        background-color: var(--primary);
        bottom: -2px;
        pointer-events: none;
        position: absolute;
        right: -2px;
        top: 0;
        width: 4px;
      }
    }

    .tableWrapper {
      margin: 1.5rem 0;
      overflow-x: auto;
    }

    &.resize-cursor {
      cursor: ew-resize;
      cursor: col-resize;
    }

    /* Image styles */
    img {
      display: block;
      height: auto;
      margin: 1.5rem 0;
      max-width: 100%;

      &.ProseMirror-selectednode {
        outline: 3px solid var(--primary);
      }
    }

    /* Link styles */
    a {
      @apply text-blue-600;
      cursor: pointer;

      &:hover {
        @apply underline;
      }
    }
  }
}

@layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
}
