@import "tailwindcss";
@import "tw-animate-css";
@import "shadcn/tailwind.css";
/* ---break---  */
@custom-variant dark (&:is(.dark *));

/* primary colors utils  */

@utility primaryBg {
    @apply bg-(--primary) bg-[linear-gradient(180deg,_rgba(255,255,255,0)_0%,_rgba(255,255,255,0.24)_100%)];
}

@utility primaryColor {
    @apply text-(--primary);
}

@utility primaryBgWithBorderShadow {
    @apply bg-(--primary) bg-[linear-gradient(180deg,_rgba(255,255,255,0)_0%,_rgba(255,255,255,0.24)_100%)] border-b-4 border-(--primary-600)! dark:border-(--primary-500)!;
}

@utility secondaryBg {
    @apply bg-(--neutral-900) bg-[linear-gradient(180deg,_rgba(255,255,255,0)_0%,_rgba(255,255,255,0.24)_100%)];
}

@utility secondaryBgWithBorderShadow {
    @apply bg-(--neutral-900) dark:bg-(--neutral-100) dark:text-(--neutral-900)! bg-[linear-gradient(180deg,_rgba(255,255,255,0)_0%,_rgba(255,255,255,0.24)_100%)] border-b-4 border-(--neutral-900)! dark:border-(--neutral-300)!;
}

@utility onPrimaryBg {
    @apply bg-(--primary-100) dark:bg-(--neutral-950)!;
}

@utility onPrimaryColor {
    @apply text-(--primary-100);
}

@utility primaryContainerBg {
    @apply bg-(--primary-100) dark:bg-(--primary-900);
}

@utility primaryContainerColor {
    @apply text-(--primary-100) dark:text-(--primary-900);
}

@utility onPrimaryContainerBg {
    @apply bg-(--primary-900) dark:bg-(--primary-100);
}

@utility onPrimaryContainerColor {
    @apply text-(--primary-900) dark:text-(--primary-100);
}

/* surface/neutral colors utils  */

@utility surfaceBrightBg {
    @apply bg-(--neutral-50) dark:bg-(--neutral-950);
}

@utility surfaceBrightColor {
    @apply text-(--neutral-50) dark:text-(--neutral-950);
}

@utility surfaceBg {
    @apply bg-(--neutral-100) dark:bg-(--neutral-950);
}

@utility surfaceColor {
    @apply text-(--neutral-100) dark:text-(--neutral-950);
}

@utility surfaceDimBg {
    @apply bg-(--neutral-200) dark:bg-(--neutral-800);
}

@utility surfaceDimColor {
    @apply text-(--neutral-200) dark:text-(--neutral-800);
}

/* surfaceContainer colors utils  */

@utility surfaceContainerLowestBg {
    @apply bg-(--neutral-50) dark:bg-(--neutral-900);
}

@utility surfaceContainerLowestColor {
    @apply text-(--neutral-50) dark:text-(--neutral-900);
}

@utility surfaceContainerLowBg {
    @apply bg-(--neutral-100) dark:bg-(--neutral-800);
}

@utility surfaceContainerLowColor {
    @apply text-(--neutral-100) dark:text-(--neutral-800);
}

@utility surfaceContainerBg {
    @apply bg-(--neutral-200) dark:bg-(--neutral-700);
}

@utility surfaceContainerColor {
    @apply text-(--neutral-200) dark:text-(--neutral-700);
}

@utility surfaceContainerHighBg {
    @apply bg-(--neutral-300) dark:bg-(--neutral-700);
}

@utility surfaceContainerHighColor {
    @apply text-(--neutral-300) dark:text-(--neutral-700);
}

@utility surfaceContainerHighestBg {
    @apply bg-(--neutral-400) dark:bg-(--neutral-600);
}

@utility surfaceContainerHighestColor {
    @apply text-(--neutral-400) dark:text-(--neutral-600);
}

/* onSurface / outline utils */

@utility onSurfaceBg {
    @apply bg-(--neutral-900) dark:bg-(--neutral-100);
}

@utility onSurfaceColor {
    @apply text-(--neutral-900) dark:text-(--neutral-100);
}

@utility onSurfaceVarBg {
    @apply bg-(--neutral-500) dark:bg-(--neutral-400);
}

@utility onSurfaceVarColor {
    @apply text-(--neutral-500) dark:text-(--neutral-400);
}

@utility outlineHighBg {
    @apply bg-(--neutral-950) dark:bg-(--neutral-300);
}

@utility outlineHighColor {
    @apply text-(--neutral-950) dark:text-(--neutral-300);
}

@utility outlineBg {
    @apply bg-(--neutral-300) dark:bg-(--neutral-700);
}

@utility outlineColor {
    @apply text-(--neutral-300) dark:text-(--neutral-700);
}

@utility outlineVariantBg {
    @apply bg-(--neutral-200) dark:bg-(--neutral-800);
}

@utility outlineVariantColor {
    @apply text-(--neutral-200) dark:text-(--neutral-800);
}

/* inverse colors utils */

@utility inverseSurfaceBg {
    @apply bg-(--secondary-950) dark:bg-(--neutral-100);
}

@utility inverseSurfaceColor {
    @apply text-(--secondary-950) dark:text-(--neutral-100);
}

@utility inverseOnSurfaceBg {
    @apply bg-(--neutral-100) dark:bg-(--neutral-800);
}

@utility inverseOnSurfaceColor {
    @apply text-(--neutral-100) dark:text-(--neutral-800);
}

@utility inversePrimaryBg {
    @apply bg-(--primary-100) dark:bg-(--primary-900);
}

@utility inversePrimaryColor {
    @apply text-(--primary-100) dark:text-(--primary-900);
}

/* error / success / warning semantic utils */

@utility errorBg {
    @apply bg-(--error-500) dark:bg-(--error-500);
}

@utility errorColor {
    @apply text-(--error-500) dark:text-(--error-500);
}

@utility onErrorBg {
    @apply bg-(--error-50) dark:bg-(--error-900);
}

@utility onErrorColor {
    @apply text-(--error-50) dark:text-(--error-900);
}

@utility errorContainerBg {
    @apply bg-(--error-50) dark:bg-(--error-900);
}

@utility onErrorContainerColor {
    @apply text-(--error-50) dark:text-(--error-900);
}

@utility successBg {
    @apply bg-(--success-500) dark:bg-(--success-500);
}

@utility successColor {
    @apply text-(--success-500) dark:text-(--success-500);
}

@utility onSuccessBg {
    @apply bg-(--success-100) dark:bg-(--success-900);
}

@utility onSuccessColor {
    @apply text-(--success-100) dark:text-(--success-900);
}

@utility successContainerBg {
    @apply bg-(--success-100) dark:bg-(--success-900);
}

@utility onSuccessContainerColor {
    @apply text-(--success-100) dark:text-(--success-900);
}

@utility warningBg {
    @apply bg-(--warning-500) dark:bg-(--warning-500);
}

@utility warningColor {
    @apply text-(--warning-500) dark:text-(--warning-500);
}

@utility warningContainerBg {
    @apply bg-(--warning-100) dark:bg-(--warning-900);
}

@utility onWarningContainerColor {
    @apply text-(--warning-100) dark:text-(--warning-900);
}

/* primary fixed utils */

@utility primaryFixedBg {
    @apply bg-(--primary-100) dark:bg-(--neutral-950);
}

@utility primaryFixedColor {
    @apply text-(--primary-100) dark:text-(--neutral-950);
}

@utility primaryFixedDimBg {
    @apply bg-(--primary-200) dark:bg-(--neutral-900);
}

@utility primaryFixedDimColor {
    @apply text-(--primary-200) dark:text-(--neutral-900);
}

@utility onPrimaryFixedBg {
    @apply bg-(--primary-900) dark:bg-(--primary-50);
}

@utility onPrimaryFixedColor {
    @apply text-(--primary-900) dark:text-(--primary-50);
}

@utility onPrimaryFixedVariantBg {
    @apply bg-(--primary-700) dark:bg-(--primary-100);
}

@utility onPrimaryFixedVariantColor {
    @apply text-(--primary-700) dark:text-(--primary-100);
}

/* orange utils */

@utility orangeBg {
    @apply bg-(--orange-500) dark:bg-(--orange-500);
}

@utility orangeColor {
    @apply text-(--orange-500) dark:text-(--orange-500);
}

@utility orangeContainerBg {
    @apply bg-(--orange-100) dark:bg-(--orange-900);
}

@utility orangeContainerColor {
    @apply text-(--orange-100) dark:text-(--orange-900);
}

@utility onOrangeBg {
    @apply bg-(--orange-900) dark:bg-(--orange-100);
}

@utility onOrangeColor {
    @apply text-(--orange-900) dark:text-(--orange-100);
}

/* purple utils */

@utility purpleBg {
    @apply bg-(--purple-500) dark:bg-(--purple-500);
}

@utility purpleColor {
    @apply text-(--purple-500) dark:text-(--purple-500);
}

@utility purpleContainerBg {
    @apply bg-(--purple-100) dark:bg-(--purple-900);
}

@utility purpleContainerColor {
    @apply text-(--purple-100) dark:text-(--purple-900);
}

@utility onPurpleContainerBg {
    @apply bg-(--purple-900) dark:bg-(--purple-100);
}

@utility onPurpleContainerColor {
    @apply text-(--purple-900) dark:text-(--purple-100);
}

/* blue utils */
@utility blueBg {
    @apply bg-(--blue-500) dark:bg-(--blue-500);
}

@utility blueColor {
    @apply text-(--blue-500) dark:text-(--blue-500);
}

@utility blueContainerBg {
    @apply bg-(--blue-100) dark:bg-(--blue-900);
}

@utility blueContainerColor {
    @apply text-(--blue-100) dark:text-(--blue-900);
}

@utility onBlueBg {
    @apply bg-(--blue-900) dark:bg-(--blue-50);
}

@utility onBlueColor {
    @apply text-(--blue-900) dark:text-(--blue-50);
}

/* ---break---  */

@theme inline {

    --font-heading: var(--font-sans);

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

    --color-sidebar-ring: var(--sidebar-ring);

    --color-sidebar-border: var(--sidebar-border);

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

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

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

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

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

    --color-sidebar: var(--sidebar);

    --color-chart-5: var(--chart-5);

    --color-chart-4: var(--chart-4);

    --color-chart-3: var(--chart-3);

    --color-chart-2: var(--chart-2);

    --color-chart-1: var(--chart-1);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    --radius-sm: calc(var(--radius) * 0.6);

    --radius-md: calc(var(--radius) * 0.8);

    --radius-lg: var(--radius);

    --radius-xl: calc(var(--radius) * 1.4);

    --radius-2xl: calc(var(--radius) * 1.8);

    --radius-3xl: calc(var(--radius) * 2.2);

    --radius-4xl: calc(var(--radius) * 2.6);
}

/* ---break---  */

:root {

    --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.985 0 0);

    --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);

    --input: oklch(0.922 0 0);

    --ring: oklch(0.708 0 0);

    --chart-1: oklch(0.87 0 0);

    --chart-2: oklch(0.556 0 0);

    --chart-3: oklch(0.439 0 0);

    --chart-4: oklch(0.371 0 0);

    --chart-5: oklch(0.269 0 0);

    --radius: 0.625rem;

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

/* ---break---  */

.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.205 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);

    --border: oklch(1 0 0 / 10%);

    --input: oklch(1 0 0 / 15%);

    --ring: oklch(0.556 0 0);

    --chart-1: oklch(0.87 0 0);

    --chart-2: oklch(0.556 0 0);

    --chart-3: oklch(0.439 0 0);

    --chart-4: oklch(0.371 0 0);

    --chart-5: oklch(0.269 0 0);

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

/* ---break---  */

@layer base {
    * {
        @apply border-border outline-ring/50;
    }

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

    html {
        @apply font-sans;
    }
}