@import 'tailwindcss';
@import 'tw-animate-css';
@plugin '@tailwindcss/typography';

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

@font-face {
    font-family: 'Inter Fallback';
    src: local('Arial');
    ascent-override: 90%;
    descent-override: 22.43%;
    line-gap-override: 0%;
    size-adjust: 107.64%;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/inter-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/inter-500-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/inter-600-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/inter-700-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/roboto-mono-regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('/fonts/roboto-mono-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/roboto-mono-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url('/fonts/roboto-mono-500-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/roboto-mono-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 600;
    font-display: swap;
    src: url('/fonts/roboto-mono-600-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/roboto-mono-700.woff2') format('woff2');
}

@font-face {
    font-family: 'Roboto Mono';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('/fonts/roboto-mono-700-italic.woff2') format('woff2');
}

@utility container {
    margin-inline: auto;
    padding-inline: 2rem;
    @media (width >= --theme(--breakpoint-sm)) {
        max-width: none;
    }
    @media (width >= 1400px) {
        max-width: 1400px;
    }
}

@theme {
    --animate-logo-spin: logo-spin 10s cubic-bezier(0.5, -0.5, 0.5, 1.25) infinite;
    --animate-roll-reveal: roll-reveal 0.4s cubic-bezier(0.22, 1.28, 0.54, 0.99);
    --animate-slide-left: slide-left 0.3s ease-out;
    --animate-slide-top: slide-top 0.3s ease-out;

    --color-background: var(--background);
    --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: var(--destructive-foreground);
    --color-border: var(--border);
    --color-input: var(--input);
    --color-ring: var(--ring);
    --color-chart-1: var(--chart-1);
    --color-chart-2: var(--chart-2);
    --color-chart-3: var(--chart-3);
    --color-chart-4: var(--chart-4);
    --color-chart-5: var(--chart-5);
    --color-sidebar: var(--sidebar);
    --color-sidebar-foreground: var(--sidebar-foreground);
    --color-sidebar-primary: var(--sidebar-primary);
    --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
    --color-sidebar-accent: var(--sidebar-accent);
    --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
    --color-sidebar-border: var(--sidebar-border);
    --color-sidebar-ring: var(--sidebar-ring);

    --font-sans: var(--font-sans);
    --font-mono: var(--font-mono);
    --font-serif: var(--font-serif);

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

    --shadow-2xs: var(--shadow-2xs);
    --shadow-xs: var(--shadow-xs);
    --shadow-sm: var(--shadow-sm);
    --shadow: var(--shadow);
    --shadow-md: var(--shadow-md);
    --shadow-lg: var(--shadow-lg);
    --shadow-xl: var(--shadow-xl);
    --shadow-2xl: var(--shadow-2xl);

    --transition-delay-10000: 10000ms;

    @keyframes logo-spin {
        0% {
            transform: rotate(0deg);
        }
        30% {
            transform: rotate(360deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    @keyframes roll-reveal {
        from {
            opacity: 0;
            transform: rotate(12deg) scale(0);
        }
        to {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
    }
    @keyframes slide-left {
        from {
            opacity: 0;
            transform: translateX(20px);
        }
        to {
            opacity: 1;
            transform: translateX(0px);
        }
    }
    @keyframes slide-top {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0px);
        }
    }
}

/*
  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 base {
    :root {
        --background: oklch(1 0 0);
        --foreground: oklch(0.32 0 0);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.32 0 0);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.32 0 0);
        --primary: oklch(0.25 0.14 245);
        --primary-foreground: oklch(1 0 0);
        --secondary: oklch(0.97 0 240);
        --secondary-foreground: oklch(0.45 0.03 240);
        --muted: oklch(0.98 0 240);
        --muted-foreground: oklch(0.55 0.02 240);
        --accent: oklch(0.9 0.03 245);
        --accent-foreground: oklch(0.32 0 0);
        --destructive: oklch(0.54 0.21 25);
        --destructive-foreground: oklch(1 0 0);
        --border: oklch(0.91 0.01 240);
        --input: oklch(0.91 0.01 240);
        --ring: oklch(0.25 0.14 245);
        --chart-1: oklch(0.25 0.14 245);
        --chart-2: oklch(0.38 0.18 245);
        --chart-3: oklch(0.5 0.22 245);
        --chart-4: oklch(0.42 0.1 245);
        --chart-5: oklch(0.55 0.14 245);
        --sidebar: oklch(0.98 0 240);
        --sidebar-foreground: oklch(0.32 0 0);
        --sidebar-primary: oklch(0.25 0.14 245);
        --sidebar-primary-foreground: oklch(1 0 0);
        --sidebar-accent: oklch(0.9 0.03 245);
        --sidebar-accent-foreground: oklch(0.32 0 0);
        --sidebar-border: oklch(0.93 0.01 240);
        --sidebar-ring: oklch(0.25 0.14 245);
        --font-sans: Inter, 'Inter Fallback', sans-serif;
        --font-serif: Inter, 'Inter Fallback', serif;
        --font-mono: 'Roboto Mono', monospace;
        --radius: 0.375rem;
        --shadow-x: 0;
        --shadow-y: 1px;
        --shadow-blur: 3px;
        --shadow-spread: 0px;
        --shadow-opacity: 0.1;
        --shadow-color: oklch(0 0 0);
        --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
        --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
        --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
        --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
        --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
        --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
        --tracking-normal: 0em;
        --spacing: 0.25rem;
    }

    .dark {
        --background: oklch(0.15 0.02 245);
        --foreground: oklch(0.92 0 0);
        --card: oklch(0.2 0.03 245);
        --card-foreground: oklch(0.92 0 0);
        --popover: oklch(0.2 0.03 245);
        --popover-foreground: oklch(0.92 0 0);
        --primary: oklch(0.5 0.16 245);
        --primary-foreground: oklch(1 0 0);
        --secondary: oklch(0.25 0.04 245);
        --secondary-foreground: oklch(0.92 0 0);
        --muted: oklch(0.22 0.03 245);
        --muted-foreground: oklch(0.72 0 0);
        --accent: oklch(0.24 0.09 245);
        --accent-foreground: oklch(0.92 0.02 245);
        --destructive: oklch(0.64 0.21 25);
        --destructive-foreground: oklch(1 0 0);
        --border: oklch(0.3 0.04 245);
        --input: oklch(0.3 0.04 245);
        --ring: oklch(0.5 0.16 245);
        --chart-1: oklch(0.5 0.16 245);
        --chart-2: oklch(0.6 0.2 245);
        --chart-3: oklch(0.7 0.22 245);
        --chart-4: oklch(0.58 0.1 245);
        --chart-5: oklch(0.74 0.14 245);
        --sidebar: oklch(0.15 0.02 245);
        --sidebar-foreground: oklch(0.92 0 0);
        --sidebar-primary: oklch(0.5 0.16 245);
        --sidebar-primary-foreground: oklch(1 0 0);
        --sidebar-accent: oklch(0.24 0.09 245);
        --sidebar-accent-foreground: oklch(0.92 0.02 245);
        --sidebar-border: oklch(0.3 0.04 245);
        --sidebar-ring: oklch(0.5 0.16 245);
        --font-sans: Inter, 'Inter Fallback', sans-serif;
        --font-serif: Inter, 'Inter Fallback', serif;
        --font-mono: 'Roboto Mono', monospace;
        --radius: 0.5rem;
        --shadow-x: 0;
        --shadow-y: 1px;
        --shadow-blur: 3px;
        --shadow-spread: 0px;
        --shadow-opacity: 0.1;
        --shadow-color: oklch(0 0 0);
        --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
        --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
        --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
        --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
        --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
        --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
        --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
    }

    ::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb {
        background: oklch(from var(--muted-foreground) l c h / 0.3);
        border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background: oklch(from var(--muted-foreground) l c h / 0.5);
    }

    * {
        scrollbar-color: oklch(from var(--muted-foreground) l c h / 0.3) transparent;
    }
}

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

    button:not(:disabled),
    [role='button']:not(:disabled) {
        cursor: pointer;
    }
}

.prose-xs {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.prose-xs hr {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose-xs h1,
.prose-xs h2,
.prose-xs h3,
.prose-xs h4,
.prose-xs h5,
.prose-xs h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.prose-xs p {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose-xs p:first-child {
    margin-top: 0;
}

.prose-xs p:last-child {
    margin-bottom: 0;
}

.prose-xs pre {
    margin-top: 1.5em;
    font-size: 1em;
    line-height: 1.5;
}

.prose-xs ul,
.prose-xs ol {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}

.prose-xs ul ul,
.prose-xs ul ol,
.prose-xs ol ol,
.prose-xs ol ul {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose-xs li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose-xs ul > li > p,
.prose-xs ol > li > p,
.prose-xs ul > li > pre,
.prose-xs ol > li > pre {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose-xs ul > li > p:first-child,
.prose-xs ol > li > p:first-child {
    margin-top: 0;
}

.prose-xs ul > li > p:last-child,
.prose-xs ol > li > p:last-child {
    margin-bottom: 0;
}

.prose-xs h1 + ul,
.prose-xs h1 + ol,
.prose-xs h2 + ul,
.prose-xs h2 + ol,
.prose-xs h3 + ul,
.prose-xs h3 + ol,
.prose-xs h4 + ul,
.prose-xs h4 + ol,
.prose-xs h5 + ul,
.prose-xs h5 + ol,
.prose-xs h6 + ul,
.prose-xs h6 ol {
    margin-top: 0;
}

.prose-xs :first-child {
    margin-top: 0;
}

.prose-xs :last-child {
    margin-bottom: 0;
}

.prose-fixed h1,
.prose-fixed h2,
.prose-fixed h3,
.prose-fixed h4,
.prose-fixed h5,
.prose-fixed h6 {
    font-size: 1em;
    line-height: 1.5;
}

.prose pre code.hljs {
    color: inherit;
    background: transparent;
}

.prose pre code.hljs {
    padding: 0;
    overflow: visible;
}

/* Sonner */
[data-sonner-toast][data-styled='true'] {
    gap: 8px !important;
}

[data-sonner-toast][data-styled='true'] [data-icon] {
    align-self: flex-start;
    margin: 2px 0;
}

[data-sonner-toast][data-styled='true'] [data-title] {
    font-size: 14px !important;
    font-weight: 500 !important;
    line-height: 20px !important;
}

[data-sonner-toaster][data-sonner-theme='dark'] [data-description],
[data-sonner-toaster][data-sonner-theme='light'] [data-description] {
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    color: var(--muted-foreground) !important;
}

.recharts-wrapper,
.recharts-wrapper * {
    outline: none !important;
}

/* Tiptap editor */
.tiptap-content .ProseMirror {
    outline: none;
    min-height: 100%;
}

.tiptap-content .ProseMirror p.is-editor-empty:first-child::before {
    color: var(--muted-foreground);
    opacity: 0.6;
    content: attr(data-placeholder);
    float: left;
    height: 0;
    pointer-events: none;
}

.tiptap-content .ProseMirror > :first-child {
    margin-top: 0;
}

.tiptap-content .ProseMirror > :last-child {
    margin-bottom: 0;
}

.tiptap-content .ProseMirror p.is-empty::before {
    content: '';
}

.tiptap-content .ProseMirror code:not(pre code) {
    background-color: var(--muted);
    padding: 0.125rem 0.25rem;
    border-radius: calc(var(--radius) - 4px);
    font-size: 0.875em;
}

.tiptap-content .ProseMirror pre {
    background-color: var(--muted);
    color: var(--foreground);
    padding: 0.75rem 1rem;
    border-radius: calc(var(--radius) - 2px);
    overflow-x: auto;
}

.tiptap-content .ProseMirror pre code {
    background: transparent;
    padding: 0;
    font-size: 0.875em;
}

.tiptap-content .ProseMirror blockquote {
    border-left: 3px solid var(--border);
    padding-left: 1rem;
    color: var(--muted-foreground);
}

.tiptap-content .ProseMirror a {
    color: var(--primary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tiptap-content .ProseMirror hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 1.5rem 0;
}
