@import "../../twui/components/base.css";

@theme inline {
    --font-sans: var(--font-body);
    --font-display: var(--font-space-grotesk);
    --font-mono: var(--font-geist-mono);

    --color-background-dark: #05070b;
    --color-foreground-dark: #f4f7fb;
    --color-background-light: #ffffff;
    --color-foreground-light: #171717;

    --color-dark: #000000;

    --color-primary: #3ecf8e;
    --color-primary-hover: #3ecf8e;
    --color-primary-outline: #3ecf8e;
    --color-primary-text: #000000;
    --color-primary-dark: #3ecf8e;
    --color-primary-dark-hover: #3ecf8e;
    --color-primary-dark-outline: #3ecf8e;
    --color-primary-dark-text: #000000;

    --radius-default: 3px;
}

.grid-frame {
    @apply grid bg-foreground-light/10 dark:bg-foreground-dark/10;
    @apply gap-px p-px;
}

.grid-frame.nested-grid-frame {
    @apply grid bg-transparent! dark:bg-transparent!;
    @apply gap-px p-0! h-full;
}

.grid-frame.nested-grid-frame .grid-cell {
    @apply h-full;
}

.grid-frame > .grid-cell {
    @apply bg-background-light dark:bg-background-dark;
}

.grid-cell-content {
    @apply p-10;
}

.twui-button,
.twui-button .twui-button-content-wrapper {
    @apply font-semibold;
}

.twui-section {
    @apply p-0!;
}

.twui-stack {
    @apply w-full items-stretch;
}

.twui-button .twui-loading .text-gray {
    @apply text-primary!;
}

.twui-button-primary .twui-loading .fill-primary {
    @apply text-primary-text;
}

.twui-h1,
.twui-h2,
.twui-h3 {
    @apply m-0!;
}

.turboci-admin-aside-link {
    @apply w-full border-foreground-light/10 dark:border-r-foreground-dark/10 py-4 px-6;
    @apply text-foreground-light;
}

.turboci-admin-aside-link.active {
    @apply bg-foreground-light/5 dark:bg-foreground-dark/5;
}

.turboci-admin-aside-link.active * {
    @apply font-semibold;
}