@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');
@import 'tailwindcss';

@import 'tw-animate-css';

@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
@source '../../storage/framework/views/*.php';

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

@utility shadow-select {
    box-shadow: 0 0 2px 2px var(--color-flex-select-400);
}
*{
    font-family: "Roboto Condensed", sans-serif;
    font-style: normal;
}

@theme inline {
    --font-sans:
        Instrument Sans, ui-sans-serif, system-ui, sans-serif,
        'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
        'Noto Color Emoji';

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

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

    --color-flex-create-50: oklch(0.95 0.059 201.37);
    --color-flex-create-100: oklch(0.888 0.148 199.09);
    --color-flex-create-200: oklch(0.796 0.135 198.98);
    --color-flex-create-300: oklch(0.711 0.121 198.92);
    --color-flex-create-400: oklch(0.617 0.105 198.9);
    --color-flex-create-500: oklch(0.532 0.091 198.74);
    --color-flex-create-600: oklch(0.457 0.078 198.38);
    --color-flex-create-700: oklch(0.372 0.063 199.44);
    --color-flex-create-800: oklch(0.295 0.05 198.92);
    --color-flex-create-900: oklch(0.21 0.036 201.15);
    --color-flex-create-950: oklch(0.174 0.03 198.8);
    --color-flex-show-50: oklch(0.947 0.091 139.72);
    --color-flex-show-100: oklch(0.893 0.216 138.29);
    --color-flex-show-200: oklch(0.808 0.216 138.09);
    --color-flex-show-300: oklch(0.733 0.197 138.11);
    --color-flex-show-400: oklch(0.646 0.172 138.06);
    --color-flex-show-500: oklch(0.564 0.15 138.12);
    --color-flex-show-600: oklch(0.472 0.126 137.99);
    --color-flex-show-700: oklch(0.386 0.103 137.84);
    --color-flex-show-800: oklch(0.304 0.082 138.36);
    --color-flex-show-900: oklch(0.218 0.057 138.09);
    --color-flex-show-950: oklch(0.171 0.045 138.69);
    --color-flex-delete-50: oklch(0.952 0.024 14.5);
    --color-flex-delete-100: oklch(0.895 0.056 14.14);
    --color-flex-delete-200: oklch(0.791 0.12 16.3);
    --color-flex-delete-300: oklch(0.696 0.193 18.19);
    --color-flex-delete-400: oklch(0.59 0.235 21.41);
    --color-flex-delete-500: oklch(0.517 0.207 21.54);
    --color-flex-delete-600: oklch(0.445 0.178 21.52);
    --color-flex-delete-700: oklch(0.362 0.145 21.4);
    --color-flex-delete-800: oklch(0.29 0.115 21.33);
    --color-flex-delete-900: oklch(0.218 0.088 20.76);
    --color-flex-delete-950: oklch(0.172 0.069 21.8);
    --color-flex-edit-50: oklch(0.982 0.023 90.71);
    --color-flex-edit-100: oklch(0.964 0.049 91.74);
    --color-flex-edit-200: oklch(0.922 0.13 95.97);
    --color-flex-edit-300: oklch(0.886 0.183 98);
    --color-flex-edit-400: oklch(0.849 0.175 98.11);
    --color-flex-edit-500: oklch(0.732 0.151 98);
    --color-flex-edit-600: oklch(0.611 0.126 97.84);
    --color-flex-edit-700: oklch(0.49 0.101 97.79);
    --color-flex-edit-800: oklch(0.379 0.078 98.46);
    --color-flex-edit-900: oklch(0.256 0.053 98.01);
    --color-flex-edit-950: oklch(0.196 0.04 98.01);
    --color-flex-select-50: oklch(0.95 0.01 273.43);
    --color-flex-select-100: oklch(0.897 0.022 277.5);
    --color-flex-select-200: oklch(0.793 0.046 274.25);
    --color-flex-select-300: oklch(0.683 0.073 271.78);
    --color-flex-select-400: oklch(0.582 0.094 269.73);
    --color-flex-select-500: oklch(0.512 0.082 269.82);
    --color-flex-select-600: oklch(0.434 0.069 268.72);
    --color-flex-select-700: oklch(0.363 0.059 270.43);
    --color-flex-select-800: oklch(0.285 0.046 269.32);
    --color-flex-select-900: oklch(0.217 0.035 268.58);
    --color-flex-select-950: oklch(0.166 0.026 269.37);
}

/*
  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 utilities {

    body,
    html {
        --font-sans:
            'Instrument Sans', ui-sans-serif, system-ui, sans-serif,
            'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
            'Noto Color Emoji';
    }
}

:root {
    --background: hsl(0 0% 100%);
    --foreground: hsl(0 0% 3.9%);
    --card: hsl(0 0% 100%);
    --card-foreground: hsl(0 0% 3.9%);
    --popover: hsl(0 0% 100%);
    --popover-foreground: hsl(0 0% 3.9%);
    --primary: hsl(0 0% 9%);
    --primary-foreground: hsl(0 0% 98%);
    --secondary: hsl(0 0% 92.1%);
    --secondary-foreground: hsl(0 0% 9%);
    --muted: hsl(0 0% 96.1%);
    --muted-foreground: hsl(0 0% 45.1%);
    --accent: hsl(0 0% 96.1%);
    --accent-foreground: hsl(0 0% 9%);
    --destructive: hsl(0 84.2% 60.2%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 92.8%);
    --input: hsl(0 0% 89.8%);
    --ring: hsl(0 0% 3.9%);
    --chart-1: hsl(12 76% 61%);
    --chart-2: hsl(173 58% 39%);
    --chart-3: hsl(197 37% 24%);
    --chart-4: hsl(43 74% 66%);
    --chart-5: hsl(27 87% 67%);
    --radius: 0.5rem;
    --sidebar-background: hsl(0 0% 98%);
    --sidebar-foreground: hsl(240 5.3% 26.1%);
    --sidebar-primary: hsl(0 0% 10%);
    --sidebar-primary-foreground: hsl(0 0% 98%);
    --sidebar-accent: hsl(0 0% 94%);
    --sidebar-accent-foreground: hsl(0 0% 30%);
    --sidebar-border: hsl(0 0% 91%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(0 0% 98%);
}

.dark {
    --background: hsl(0 0% 3.9%);
    --foreground: hsl(0 0% 98%);
    --card: hsl(0 0% 3.9%);
    --card-foreground: hsl(0 0% 98%);
    --popover: hsl(0 0% 3.9%);
    --popover-foreground: hsl(0 0% 98%);
    --primary: hsl(0 0% 98%);
    --primary-foreground: hsl(0 0% 9%);
    --secondary: hsl(0 0% 14.9%);
    --secondary-foreground: hsl(0 0% 98%);
    --muted: hsl(0 0% 16.08%);
    --muted-foreground: hsl(0 0% 63.9%);
    --accent: hsl(0 0% 14.9%);
    --accent-foreground: hsl(0 0% 98%);
    --destructive: hsl(0 84% 60%);
    --destructive-foreground: hsl(0 0% 98%);
    --border: hsl(0 0% 14.9%);
    --input: hsl(0 0% 14.9%);
    --ring: hsl(0 0% 83.1%);
    --chart-1: hsl(220 70% 50%);
    --chart-2: hsl(160 60% 45%);
    --chart-3: hsl(30 80% 55%);
    --chart-4: hsl(280 65% 60%);
    --chart-5: hsl(340 75% 55%);
    --sidebar-background: hsl(0 0% 7%);
    --sidebar-foreground: hsl(0 0% 95.9%);
    --sidebar-primary: hsl(360, 100%, 100%);
    --sidebar-primary-foreground: hsl(0 0% 100%);
    --sidebar-accent: hsl(0 0% 15.9%);
    --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
    --sidebar-border: hsl(0 0% 15.9%);
    --sidebar-ring: hsl(217.2 91.2% 59.8%);
    --sidebar: hsl(240 5.9% 10%);
}

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

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