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



html {
    scroll-behavior: smooth;
}

.loader-btn {
    color: #fff;
    width: 4px;
    aspect-ratio: 1;
    border-radius: 50%;
    box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
    transform: translateX(-38px);
    animation: l21 .5s infinite alternate linear;
}

@keyframes l21 {
    50% {
        box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px
    }

    100% {
        box-shadow: 19px 0 0 0, 38px 0 0 3px, 57px 0 0 7px
    }
}
/* LIGHT MODE */
:root {
    --button-outline: rgba(0,0,0, .10);
    --badge-outline: rgba(0,0,0, .05);
    /* Automatic computation of border around primary / danger buttons */
    --opaque-button-border-intensity: -8; /* In terms of percentages */
    /* Backgrounds applied on top of other backgrounds when hovered/active */
    --elevate-1: rgba(0,0,0, .03);
    --elevate-2: rgba(0,0,0, .08);
    --background: 0 0% 98%;
    --foreground: 220 15% 15%;
    --border: 220 10% 88%;
    --card: 0 0% 100%;
    --card-foreground: 220 15% 15%;
    --card-border: 220 8% 92%;
    --sidebar: 220 6% 96%;
    --sidebar-foreground: 220 15% 15%;
    --sidebar-border: 220 10% 90%;
    --sidebar-primary: 210 85% 45%;
    --sidebar-primary-foreground: 210 85% 98%;
    --sidebar-accent: 220 12% 92%;
    --sidebar-accent-foreground: 220 15% 20%;
    --sidebar-ring: 210 85% 45%;
    --popover: 220 8% 94%;
    --popover-foreground: 220 15% 15%;
    --popover-border: 220 12% 86%;
    --primary: 210 85% 45%;
    --primary-foreground: 210 85% 98%;
    --secondary: 355 75% 55%;
    --secondary-foreground: 355 75% 98%;
    --muted: 220 12% 92%;
    --muted-foreground: 220 12% 35%;
    --accent: 45 95% 60%;
    --accent-foreground: 45 95% 15%;
    --destructive: 355 75% 55%;
    --destructive-foreground: 355 75% 98%;
    --input: 220 12% 75%;
    --ring: 210 85% 45%;
    --chart-1: 210 85% 45%;
    --chart-2: 355 75% 55%;
    --chart-3: 45 95% 60%;
    --chart-4: 280 60% 50%;
    --chart-5: 160 55% 45%;
    --font-sans: "Inter", "Open Sans", sans-serif;
    --font-serif: "Bebas Neue", Georgia, serif;
    --font-mono: "JetBrains Mono", "Roboto Mono", monospace;
    --radius: .5rem; /* 8px */
    --shadow-2xs: 0px 2px 0px 0px hsl(220 10% 20% / 0.02);
    --shadow-xs: 0px 2px 0px 0px hsl(220 10% 20% / 0.03);
    --shadow-sm: 0px 2px 0px 0px hsl(220 10% 20% / 0.04), 0px 1px 2px -1px hsl(220 10% 20% / 0.05);
    --shadow: 0px 2px 0px 0px hsl(220 10% 20% / 0.04), 0px 1px 2px -1px hsl(220 10% 20% / 0.06);
    --shadow-md: 0px 2px 0px 0px hsl(220 10% 20% / 0.05), 0px 2px 4px -1px hsl(220 10% 20% / 0.07);
    --shadow-lg: 0px 2px 0px 0px hsl(220 10% 20% / 0.06), 0px 4px 6px -1px hsl(220 10% 20% / 0.08);
    --shadow-xl: 0px 2px 0px 0px hsl(220 10% 20% / 0.07), 0px 8px 10px -1px hsl(220 10% 20% / 0.10);
    --shadow-2xl: 0px 2px 0px 0px hsl(220 10% 20% / 0.12);
    --tracking-normal: 0em;
    --spacing: 0.25rem;
    /* Automatically computed borders - intensity can be controlled by the user by the --opaque-button-border-intensity setting */
    /* Fallback for older browsers */
    --sidebar-primary-border: hsl(var(--sidebar-primary));
    --sidebar-primary-border: hsl(from hsl(var(--sidebar-primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --sidebar-accent-border: hsl(var(--sidebar-accent));
    --sidebar-accent-border: hsl(from hsl(var(--sidebar-accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --primary-border: hsl(var(--primary));
    --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --secondary-border: hsl(var(--secondary));
    --secondary-border: hsl(from hsl(var(--secondary)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --muted-border: hsl(var(--muted));
    --muted-border: hsl(from hsl(var(--muted)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --accent-border: hsl(var(--accent));
    --accent-border: hsl(from hsl(var(--accent)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
    /* Fallback for older browsers */
    --destructive-border: hsl(var(--destructive));
    --destructive-border: hsl(from hsl(var(--destructive)) h s calc(l + var(--opaque-button-border-intensity)) / alpha);
}

.dark {
    --button-outline: #ffffff1a;
    --badge-outline: #ffffff0d;
    --opaque-button-border-intensity: 9; /* In terms of percentages */
    /* Backgrounds applied on top of other backgrounds when hovered/active */
    --elevate-1: rgba(255,255,255, .04);
    --elevate-2: rgba(255,255,255, .09);
    --background: 220 20% 8%;
    --foreground: 0 0% 98%;
    --border: 220 15% 18%;
    --card: 220 18% 12%;
    --card-foreground: 0 0% 98%;
    --card-border: 220 15% 20%;
    --sidebar: 220 10% 18%;
    --sidebar-foreground: 220 8% 92%;
    --sidebar-border: 220 12% 25%;
    --sidebar-primary: 210 85% 45%;
    --sidebar-primary-foreground: 210 85% 98%;
    --sidebar-accent: 220 15% 24%;
    --sidebar-accent-foreground: 220 10% 92%;
    --sidebar-ring: 210 85% 45%;
    --popover: 220 12% 20%;
    --popover-foreground: 220 10% 92%;
    --popover-border: 220 12% 28%;
    --primary: 210 90% 48%;
    --primary-foreground: 0 0% 100%;
    --secondary: 355 80% 58%;
    --secondary-foreground: 0 0% 100%;
    --muted: 220 15% 18%;
    --muted-foreground: 220 10% 65%;
    --accent: 45 100% 65%;
    --accent-foreground: 220 20% 10%;
    --destructive: 355 75% 55%;
    --destructive-foreground: 355 75% 98%;
    --input: 220 12% 35%;
    --ring: 210 85% 45%;
    --chart-1: 210 85% 55%;
    --chart-2: 355 75% 55%;
    --chart-3: 45 95% 60%;
    --chart-4: 280 70% 65%;
    --chart-5: 160 65% 60%;
    --shadow-2xs: 0px 2px 0px 0px hsl(220 15% 5% / 0.15);
    --shadow-xs: 0px 2px 0px 0px hsl(220 15% 5% / 0.20);
    --shadow-sm: 0px 2px 0px 0px hsl(220 15% 5% / 0.25), 0px 1px 2px -1px hsl(220 15% 5% / 0.30);
    --shadow: 0px 2px 0px 0px hsl(220 15% 5% / 0.25), 0px 1px 2px -1px hsl(220 15% 5% / 0.35);
    --shadow-md: 0px 2px 0px 0px hsl(220 15% 5% / 0.30), 0px 2px 4px -1px hsl(220 15% 5% / 0.40);
    --shadow-lg: 0px 2px 0px 0px hsl(220 15% 5% / 0.35), 0px 4px 6px -1px hsl(220 15% 5% / 0.45);
    --shadow-xl: 0px 2px 0px 0px hsl(220 15% 5% / 0.40), 0px 8px 10px -1px hsl(220 15% 5% / 0.50);
    --shadow-2xl: 0px 2px 0px 0px hsl(220 15% 5% / 0.55);
}

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

    body {
        @apply font-sans antialiased bg-background text-foreground;
    }
}

/**
 * Using the elevate system.
 * Automatic contrast adjustment.
 *
 * <element className="hover-elevate" />
 * <element className="active-elevate-2" />
 *
 * // Using the tailwind utility when a data attribute is "on"
 * <element className="toggle-elevate data-[state=on]:toggle-elevated" />
 * // Or manually controlling the toggle state
 * <element className="toggle-elevate toggle-elevated" />
 *
 * Elevation systems have to handle many states.
 * - not-hovered, vs. hovered vs. active  (three mutually exclusive states)
 * - toggled or not
 * - focused or not (this is not handled with these utilities)
 *
 * Even without handling focused or not, this is six possible combinations that
 * need to be distinguished from eachother visually.
 */
@layer utilities {

    /* Hide ugly search cancel button in Chrome until we can style it properly */
    input[type="search"]::-webkit-search-cancel-button {
        @apply hidden;
    }

    /* Placeholder styling for contentEditable div */
    [contenteditable][data-placeholder]:empty::before {
        content: attr(data-placeholder);
        color: hsl(var(--muted-foreground));
        pointer-events: none;
    }

    /* .no-default-hover-elevate/no-default-active-elevate is an escape hatch so consumers of
   * buttons/badges can remove the automatic brightness adjustment on interactions
   * and program their own. */
    .no-default-hover-elevate {
    }

    .no-default-active-elevate {
    }


    /**
   * Toggleable backgrounds go behind the content. Hoverable/active goes on top.
   * This way they can stack/compound. Both will overlap the parent's borders!
   * So borders will be automatically adjusted both on toggle, and hover/active,
   * and they will be compounded.
   */
    .toggle-elevate::before,
    .toggle-elevate-2::before {
        content: "";
        pointer-events: none;
        position: absolute;
        inset: 0px;
        /*border-radius: inherit;   match rounded corners */
        border-radius: inherit;
        z-index: -1;
        /* sits behind content but above backdrop */
    }

    .toggle-elevate.toggle-elevated::before {
        background-color: var(--elevate-2);
    }

    /* If there's a 1px border, adjust the inset so that it covers that parent's border */
    .border.toggle-elevate::before {
        inset: -1px;
    }

    /* Does not work on elements with overflow:hidden! */
    .hover-elevate:not(.no-default-hover-elevate),
    .active-elevate:not(.no-default-active-elevate),
    .hover-elevate-2:not(.no-default-hover-elevate),
    .active-elevate-2:not(.no-default-active-elevate) {
        position: relative;
        z-index: 0;
    }

        .hover-elevate:not(.no-default-hover-elevate)::after,
        .active-elevate:not(.no-default-active-elevate)::after,
        .hover-elevate-2:not(.no-default-hover-elevate)::after,
        .active-elevate-2:not(.no-default-active-elevate)::after {
            content: "";
            pointer-events: none;
            position: absolute;
            inset: 0px;
            /*border-radius: inherit;   match rounded corners */
            border-radius: inherit;
            z-index: 999;
            /* sits in front of content */
        }

    .hover-elevate:hover:not(.no-default-hover-elevate)::after,
    .active-elevate:active:not(.no-default-active-elevate)::after {
        background-color: var(--elevate-1);
    }

    .hover-elevate-2:hover:not(.no-default-hover-elevate)::after,
    .active-elevate-2:active:not(.no-default-active-elevate)::after {
        background-color: var(--elevate-2);
    }

    /* If there's a 1px border, adjust the inset so that it covers that parent's border */
    .border.hover-elevate:not(.no-hover-interaction-elevate)::after,
    .border.active-elevate:not(.no-active-interaction-elevate)::after,
    .border.hover-elevate-2:not(.no-hover-interaction-elevate)::after,
    .border.active-elevate-2:not(.no-active-interaction-elevate)::after,
    .border.hover-elevate:not(.no-hover-interaction-elevate)::after {
        inset: -1px;
    }
}