@import "tailwindcss";
@import "../../packages/level2/client/styles/common.css";
@import "quill/dist/quill.snow.css";
@import "../../packages/level2/client/styles/rich-text-editor.css";

@theme {
    --color-background: hsl(var(--background));
    --color-foreground: hsl(var(--foreground));
    --color-card: hsl(var(--card));
    --color-card-foreground: hsl(var(--card-foreground));
    --color-popover: hsl(var(--popover));
    --color-popover-foreground: hsl(var(--popover-foreground));
    --color-primary: hsl(var(--primary));
    --color-primary-foreground: hsl(var(--primary-foreground));
    --color-secondary: hsl(var(--secondary));
    --color-secondary-foreground: hsl(var(--secondary-foreground));
    --color-muted: hsl(var(--muted));
    --color-muted-foreground: hsl(var(--muted-foreground));
    --color-accent: hsl(var(--accent));
    --color-accent-foreground: hsl(var(--accent-foreground));
    --color-destructive: hsl(var(--destructive));
    --color-destructive-foreground: hsl(var(--destructive-foreground));
    --color-border: hsl(var(--border));
    --color-input: hsl(var(--input));
    --color-ring: hsl(var(--ring));

    --shadow-toolbar: -0.5rem 0 0.25rem -0.25rem hsl(var(--fd-toolbar-shadow));
    --shadow-toolbar-rounded: -0.55rem 0 0 0 hsl(var(--fd-tertiary-900));

    --color-subtle-400: hsl(var(--subtle-400));
    --color-subtle-500: hsl(var(--subtle-500));
    --color-subtle-700: hsl(var(--subtle-700));

    --color-fd-accent: hsl(var(--fd-accent));
    --color-fd-accent-light: hsl(var(--fd-accent-light));
    --color-fd-green-accent: hsl(var(--fd-green-accent));

    --color-fd-tertiary-50: hsl(var(--fd-tertiary-50));
    --color-fd-tertiary-200: hsl(var(--fd-tertiary-200));
    --color-fd-tertiary-600: hsl(var(--fd-tertiary-600));
    --color-fd-tertiary-700: hsl(var(--fd-tertiary-700));
    --color-fd-tertiary-900: hsl(var(--fd-tertiary-900));

    --color-fd-enum-default-color: hsl(var(--fd-enum-default-color));
    --color-fd-enum-color-1: hsl(var(--fd-enum-color-1));
    --color-fd-enum-color-2: hsl(var(--fd-enum-color-2));
    --color-fd-enum-color-3: hsl(var(--fd-enum-color-3));
    --color-fd-enum-color-4: hsl(var(--fd-enum-color-4));
    --color-fd-enum-color-5: hsl(var(--fd-enum-color-5));
    --color-fd-enum-color-6: hsl(var(--fd-enum-color-6));
    --color-fd-enum-color-7: hsl(var(--fd-enum-color-7));
    --color-fd-enum-color-8: hsl(var(--fd-enum-color-8));
    --color-fd-enum-color-9: hsl(var(--fd-enum-color-9));
    --color-fd-enum-color-10: hsl(var(--fd-enum-color-10));
    --color-fd-enum-color-11: hsl(var(--fd-enum-color-11));
    --color-fd-enum-color-12: hsl(var(--fd-enum-color-12));
    --color-fd-enum-color-13: hsl(var(--fd-enum-color-13));
    --color-fd-enum-color-14: hsl(var(--fd-enum-color-14));
    --color-fd-enum-color-15: hsl(var(--fd-enum-color-15));
    --color-fd-enum-color-16: hsl(var(--fd-enum-color-16));
    --color-fd-enum-color-17: hsl(var(--fd-enum-color-17));
    --color-fd-enum-color-18: hsl(var(--fd-enum-color-18));
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;
        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;
        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;
        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;
        --radius: 0.5rem;

        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;

        --fd-accent: 190, 100%, 34%; /* accent-600 */
        --fd-accent-light: 172, 100%, 37%; /* accent-100 */

        --fd-tertiary-50: 216, 33%, 97%;
        --fd-tertiary-200: 206, 35%, 86%;
        --fd-tertiary-600: 206, 38%, 39%;
        --fd-tertiary-700: 208, 38%, 32%;
        --fd-tertiary-900: 208, 31%, 24%;
        --fd-green-accent: 120, 100%, 34%;

        --fd-shadow: 0, 0%, 0%, 0.25;

        --fd-toolbar: var(--fd-tertiary-900);
        --fd-toolbar-input: var(--fd-tertiary-700);
        --fd-toolbar-hover: var(--fd-tertiary-700);
        --fd-toolbar-keys: var(--fd-tertiary-200);
        --fd-toolbar-placeholder: var(--fd-tertiary-50);
        --fd-toolbar-shadow: var(--fd-shadow);
        --fd-toolbar-separators: var(--fd-tertiary-600);
        --fd-sidebar-icons: var(--fd-tertiary-50);
        --fd-toolbar-icons: var(--fd-tertiary-50);
        --fd-toolbar-border: var(--fd-tertiary-700);
        --fd-toolbar-button: var(--fd-tertiary-600);

        --subtle-400: 210, 10%, 65%;
        --subtle-500: 220, 9%, 46%;
        --subtle-700: 220, 20%, 27%;

        --fd-enum-default-color: 0, 0%, 92%;
        --fd-enum-color-1: 200, 50%, 87%;
        --fd-enum-color-2: 120, 35%, 87%;
        --fd-enum-color-3: 340, 61%, 91%;
        --fd-enum-color-4: 19, 45%, 88%;
        --fd-enum-color-5: 340, 61%, 91%;
        --fd-enum-color-6: 9, 90%, 91%;
        --fd-enum-color-7: 283, 44%, 90%;
        --fd-enum-color-8: 9, 90%, 91%;
        --fd-enum-color-9: 200, 50%, 87%;
        --fd-enum-color-10: 38, 87%, 90%;
        --fd-enum-color-11: 283, 44%, 90%;
        --fd-enum-color-12: 283, 44%, 90%;
        --fd-enum-color-13: 340, 61%, 91%;
        --fd-enum-color-14: 283, 44%, 90%;
        --fd-enum-color-15: 38, 87%, 90%;
        --fd-enum-color-16: 0, 0%, 92%;
        --fd-enum-color-17: 9, 90%, 91%;
        --fd-enum-color-18: 19, 45%, 88%;
    }

    .dark {
        --background: 222.2 84% 4.9%;
        --foreground: 210 40% 98%;
        --card: 222.2 84% 4.9%;
        --card-foreground: 210 40% 98%;
        --popover: 222.2 84% 4.9%;
        --popover-foreground: 210 40% 98%;
        --primary: 210 40% 98%;
        --primary-foreground: 222.2 47.4% 11.2%;
        --secondary: 217.2 32.6% 17.5%;
        --secondary-foreground: 210 40% 98%;
        --muted: 217.2 32.6% 17.5%;
        --muted-foreground: 215 20.2% 65.1%;
        --accent: 217.2 32.6% 17.5%;
        --accent-foreground: 210 40% 98%;
        --destructive: 0 62.8% 30.6%;
        --destructive-foreground: 210 40% 98%;
        --border: 217.2 32.6% 17.5%;
        --input: 217.2 32.6% 17.5%;
        --ring: 212.7 26.8% 83.9;

        --radius: 0.5rem;

        --fd-accent: 190, 100%, 34%; /* accent-600 */
        --fd-accent-light: 172, 100%, 37%; /* accent-100 */

        --fd-tertiary-50: 216, 33%, 97%;
        --fd-tertiary-200: 206, 35%, 86%;
        --fd-tertiary-600: 206, 38%, 39%;
        --fd-tertiary-700: 208, 38%, 32%;
        --fd-tertiary-900: 208, 31%, 24%;

        --fd-shadow: 0, 0%, 0%, 0.25;

        --fd-toolbar: var(--fd-tertiary-900);
        --fd-toolbar-input: var(--fd-tertiary-700);
        --fd-toolbar-hover: var(--fd-tertiary-700);
        --fd-toolbar-keys: var(--fd-tertiary-200);
        --fd-toolbar-placeholder: var(--fd-tertiary-50);
        --fd-toolbar-shadow: var(--fd-shadow);
        --fd-toolbar-separators: var(--fd-tertiary-600);
        --fd-sidebar-icons: var(--fd-tertiary-50);
        --fd-toolbar-icons: var(--fd-tertiary-50);
        --fd-toolbar-border: var(--fd-tertiary-700);
        --fd-toolbar-button: var(--fd-tertiary-600);

        --subtle-400: 210, 10%, 65%;
        --subtle-500: 220, 9%, 46%;
        --subtle-700: 220, 20%, 27%;

        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;

        --fd-enum-default-color: 0, 0%, 22%;
        --fd-enum-color-1: 219, 43%, 30%;
        --fd-enum-color-2: 152, 37%, 27%;
        --fd-enum-color-3: 328, 37%, 30%;
        --fd-enum-color-4: 27, 63%, 32%;
        --fd-enum-color-5: 328, 37%, 30%;
        --fd-enum-color-6: 10, 40%, 31%;
        --fd-enum-color-7: 268, 38%, 29%;
        --fd-enum-color-8: 10, 40%, 31%;
        --fd-enum-color-9: 219, 43%, 30%;
        --fd-enum-color-10: 37, 56%, 36%;
        --fd-enum-color-11: 268, 38%, 29%;
        --fd-enum-color-12: 268, 38%, 29%;
        --fd-enum-color-13: 328, 37%, 30%;
        --fd-enum-color-14: 268, 38%, 29%;
        --fd-enum-color-15: 37, 56%, 36%;
        --fd-enum-color-16: 0, 0%, 35%;
        --fd-enum-color-17: 10, 40%, 31%;
        --fd-enum-color-18: 27, 63%, 32%;
    }
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@utility animate-fade-in {
    animation: fade-in 0.15s ease-in-out both;
}

@utility animate-fade-out {
    animation: fade-out 0.15s ease-in-out both;
}

@utility animate-label-up {
    opacity: 1;
    transform: translate(0, -1rem) scale(0.75);
}

@utility animate-label-down {
    opacity: 0;
    transform: translate(0, 0) scale(1);
}
