@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";
@import "fumadocs-twoslash/twoslash.css";

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

@source '../../../node_modules/fumadocs-ui/dist/**/*.js';
@source '../../../node_modules/@ui/topia/dist/**/*.js';

@plugin 'tailwindcss-animate';

@theme inline {
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
  --font-redaction: var(--font-redaction);
  --font-open-runde: var(--font-open-runde);

  --color-background: var(--background);
  --color-background-subtle: var(--background-subtle);
  --color-foreground: var(--foreground);

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

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

  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);

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

  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);

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

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

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

  --color-fd-card: var(--fd-card);

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

  --indigo-100: 226.5 100% 93.9%;
  --indigo-700: 244.5 57.9% 50.6%;

  --animate-accordion-down: accordion-down 0.2s ease-out;
  --animate-accordion-up: accordion-up 0.2s ease-out;

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

:root {
  --radius: 0.625rem;
  --background: oklch(1 0 0);
  --foreground: oklch(0.145 0 0);
  --card: oklch(1 0 0);
  --card-foreground: oklch(0.145 0 0);
  --popover: oklch(1 0 0);
  --popover-foreground: oklch(0.145 0 0);
  --primary: oklch(0.205 0 0);
  --primary-foreground: oklch(0.97 0.014 254.604);
  --secondary: oklch(0.97 0 0);
  --secondary-foreground: oklch(0.205 0 0);
  --muted: oklch(0.97 0 0);
  --muted-foreground: oklch(0.556 0 0);
  --accent: oklch(0.97 0 0);
  --accent-foreground: oklch(0.205 0 0);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.922 0 0);
  --primary-blue: oklch(0.623 0.214 259.815);
  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);
  --chart-1: oklch(0.646 0.222 41.116);
  --chart-2: oklch(0.6 0.118 184.704);
  --chart-3: oklch(0.398 0.07 227.392);
  --chart-4: oklch(0.828 0.189 84.429);
  --chart-5: oklch(0.769 0.188 70.08);
  --sidebar: oklch(0.985 0 0);
  --sidebar-foreground: oklch(0.145 0 0);
  --sidebar-primary: oklch(0.205 0 0);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.97 0 0);
  --sidebar-accent-foreground: oklch(0.205 0 0);
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: oklch(0.708 0 0);
  --nav-height: 57px !important;
  --fd-layout-width: 1400px;
  --sidebar-width: 16rem;
  --sidebar-width-icon: 3rem;
}

.dark {
  --background: oklch(0.145 0 0);
  --foreground: oklch(0.985 0 0);
  --card: oklch(0.205 0 0);
  --card-foreground: oklch(0.985 0 0);
  --popover: oklch(0.205 0 0);
  --popover-foreground: oklch(0.985 0 0);
  --primary: oklch(0.922 0 0);
  --primary-foreground: oklch(0.985 0 0);
  --secondary: oklch(0.269 0 0);
  --secondary-foreground: oklch(0.985 0 0);
  --muted: oklch(0.269 0 0);
  --muted-foreground: oklch(0.708 0 0);
  --accent: oklch(0.269 0 0);
  --accent-foreground: oklch(0.985 0 0);
  --destructive: oklch(0.704 0.191 22.216);
  --destructive-foreground: oklch(0.637 0.237 25.331);
  --border: oklch(1 0 0 / 10%);
  --primary-blue: oklch(0.546 0.245 262.881);
  --input: oklch(1 0 0 / 15%);
  --ring: oklch(0.556 0 0);
  --chart-1: oklch(0.488 0.243 264.376);
  --chart-2: oklch(0.696 0.17 162.48);
  --chart-3: oklch(0.769 0.188 70.08);
  --chart-4: oklch(0.627 0.265 303.9);
  --chart-5: oklch(0.645 0.246 16.439);
  --sidebar: oklch(0.205 0 0);
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: oklch(0.488 0.243 264.376);
  --sidebar-primary-foreground: oklch(0.985 0 0);
  --sidebar-accent: oklch(0.269 0 0);
  --sidebar-accent-foreground: oklch(0.985 0 0);
  --sidebar-border: oklch(1 0 0 / 10%);
  --sidebar-ring: oklch(0.556 0 0);
}

@layer base {
  * {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--border)) transparent;
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
  ::selection {
    background-color: hsl(var(--indigo-100)) !important;
    color: hsl(var(--indigo-700)) !important;
  }
  ::-webkit-scrollbar {
    width: 5px;
  }
  ::-webkit-scrollbar-track {
    background: transparent;
  }
  ::-webkit-scrollbar-thumb {
    background: hsl(var(--border));
    border-radius: 5px;
  }
  button:not([disabled]),
  [role="button"]:not([disabled]) {
    cursor: pointer;
  }
}
/* Fix Fumadocs theme toggle icons */
[data-theme-toggle] svg {
  @apply fill-none;
}

/* Remove borders from sidebar and nav */
#nd-sidebar,
#nd-subnav > div,
#nd-tocnav {
  @apply border-none;
}

article {
  max-width: 1120px;
  padding-left: 28px;
}

:root {
  /* --nav-height: 61px; */

  --color-fd-background: var(--background);
  --color-fd-primary: var(--primary-blue);
  --color-fd-border: var(--border);
  --color-fd-accent: var(--accent);
  --color-fd-accent-foreground: var(--accent-foreground);
  --color-fd-muted: var(--muted);
  --color-fd-muted-foreground: var(--muted-foreground);
  --color-fd-foreground: var(--foreground);
  --color-fd-secondary: var(--secondary);
  --color-fd-secondary-foreground: var(--secondary-foreground);
  --color-fd-card: var(--card);
  --color-fd-card-foreground: var(--card-foreground);
  --color-fd-popover-foreground: var(--popover-foreground);
  --color-fd-popover: var(--popover);
  --color-fd-primary-foreground: var(--primary-foreground);
  --color-fd-ring: var(--ring);
}

@layer utilities {
  .container-wrapper {
    @apply max-w-[1400px] min-[1800px]:max-w-screen-2xl mx-auto w-full;
  }

  .container {
    @apply px-4 xl:px-6 mx-auto max-w-screen-2xl;
  }
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
  .border-grid {
    @apply border-border dark:border-border border-dashed;
  }
  .span-highlight {
    background-image: url(/images/brush-line.png);
    background-position: 60% 100%;
    background-repeat: repeat-x;
    background-size: contain;
    background-attachment: scroll;
    user-select: none;
  }
}

@layer theme {
  /* Background gradients */
  @property --bg-gradient-button {
    syntax: "<gradient>";
    inherits: false;
    initial-value: linear-gradient(-90deg, #007cf0, #00dfd8, #ff0080, #007cf0);
  }

  @property --bg-trial {
    syntax: "<gradient>";
    inherits: false;
    initial-value: linear-gradient(135deg, #0070f3, #f81ce5);
  }

  @property --bg-book-bind {
    syntax: "<gradient>";
    inherits: false;
    initial-value:
      linear-gradient(
        90deg,
        hsla(0, 0%, 100%, 0),
        hsla(0, 0%, 100%, 0) 12%,
        hsla(0, 0%, 100%, 0.25) 29.25%,
        hsla(0, 0%, 100%, 0) 50.5%,
        hsla(0, 0%, 100%, 0) 75.25%,
        hsla(0, 0%, 100%, 0.25) 91%,
        hsla(0, 0%, 100%, 0)
      ),
      linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.03),
        rgba(0, 0, 0, 0.1) 12%,
        transparent 30%,
        rgba(0, 0, 0, 0.02) 50%,
        rgba(0, 0, 0, 0.2) 73.5%,
        rgba(0, 0, 0, 0.5) 75.25%,
        rgba(0, 0, 0, 0.15) 85.25%,
        transparent
      );
  }

  @property --bg-book-pages {
    syntax: "<gradient>";
    inherits: false;
    initial-value: repeating-linear-gradient(
      90deg,
      #fff,
      #efefef 1px,
      #fff 3px,
      #9a9a9a 0
    );
  }

  /* Box shadows */
  @property --shadow-book {
    syntax: "<shadow>";
    inherits: false;
    initial-value:
      0 1.8px 3.6px rgba(0, 0, 0, 0.05),
      0 10.8px 21.6px rgba(0, 0, 0, 0.08),
      inset 0 -0.9px 0 rgba(0, 0, 0, 0.1),
      inset 0 1.8px 1.8px hsla(0, 0%, 100%, 0.1),
      inset 3.6px 0 3.6px rgba(0, 0, 0, 0.1);
  }
}
