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

@layer base {
    :root {
        --background: #ffffff;
        --foreground: #020817;
        --card: #ffffff;
        --card-foreground: #020817;
        --popover: #ffffff;
        --popover-foreground: #020817;
        --primary: #7f32b0;
        --primary-foreground: #f8fafc;
        --secondary: #f1f5f9;
        --secondary-foreground: #0f172a;
        --muted: #f1f5f9;
        --muted-foreground: #64748b;
        --accent: #f1f5f9;
        --accent-foreground: #0f172a;
        --destructive: #ef4444;
        --destructive-foreground: #f8fafc;
        --border: #e2e8f0;
        --input: #e2e8f0;
        --ring: #020817;
        --radius: 0.5rem;
        --json-string: #89231c;
        --json-number: #367950;
        --json-boolean: #0000f6;
        --json-null: #0000f6;
        --json-key: #204096;
    }

    .dark,
    :root[class~="dark"] {
        --background: #09090b;
        --foreground: #E1DFE3;
        --card: #0A0A0A;
        --card-foreground: #E1DFE3;
        --popover: #09090b;
        --popover-foreground: #E1DFE3;
        --primary: #712395;
        --primary-foreground: #E1DFE3;
        --secondary: #0e0e0e;
        --secondary-foreground: #E1DFE3;
        --muted: #8A2BB61A;
        --muted-foreground: #838185;
        --accent: #8A2BB61A;
        --accent-foreground: #712495;
        --destructive: #E5484D;
        --destructive-foreground: #E1DFE3;
        --border: #17151B;
        --input: #17151B;
        --ring: #17151B;
        --radius: 0.5rem;
        --json-string: #a77a64;
        --json-number: #367950;
        --json-boolean: #5c8dca;
        --json-null: #5c8dca;
        --json-key: #a0d4f9;
    }
}

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

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

/* JSON styling */
pre .string {
    color: var(--json-string);
}

.number {
    color: var(--json-number);
}

.boolean {
    color: var(--json-boolean);
}

.null {
    color: var(--json-null);
}

.key {
    color: var(--json-key);
}

/* hide scrollbar */
html {
    overflow: scroll;
    overflow-x: hidden;
}

::-webkit-scrollbar {
    width: 0;
    background: transparent;
}

/* Clerk */
.cl-card {
    background-color: var(--card);
    border-color: var(--muted);
}

.cl-formFieldInput {
    background-color: var(--card);
    border-color: var(--muted);
}

.cl-formButtonPrimary {
    background-color: var(--primary);
    border-color: var(--border);
    color: var(--primary-foreground);

    &:hover {
        background-color: var(--primary);
        border-color: var(--border);
        color: var(--primary-foreground);
    }
}

.cl-footerActionLink {
    color: var(--primary);
}

.cl-profileSectionPrimaryButton {
    color: var(--primary);
}

.cl-badge {
    background-color: var(--muted);
    color: var(--muted-foreground);
}

.cl-formButtonReset {
    color: var(--muted-foreground);
}

.cl-card > :last-child {
    display: none;
}

.cl-organizationSwitcher-root {
    height: 32px;
}

.cl-organizationSwitcherTrigger {
    width: 175px;
}

.cl-headerTitle {
    color: var(--primary-popover-foreground);
}

.cl-form p,
.cl-form label,
.cl-form svg {
    color: var(--primary-popover-foreground);
}

.cl-formFieldInput {
    color: var(--muted-foreground);
}

.cl-organizationSwitcher-root {
    height: 30px;
}

.cl-organizationPreviewAvatarBox {
    height: 24px;
    width: 24px;
}

.cl-organizationSwitcherTriggerIcon {
    visibility: hidden;
}

.cl-organizationPreviewMainIdentifier {
    color: var(--muted-foreground);
}

.cl-membersPageInviteButton {
    background-color: var(--primary);
    color: var(--primary-foreground);
}