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

:root {
    --radius: 0.65rem;
    --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.14 154);
    --chart-2: oklch(0.72 0.19 150);
    --chart-3: oklch(0.63 0.17 149);
    --chart-4: oklch(0.53 0.14 150);
    --chart-5: oklch(0.45 0.11 151);
    --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);
}

.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.14 154);
    --chart-2: oklch(0.72 0.19 150);
    --chart-3: oklch(0.63 0.17 149);
    --chart-4: oklch(0.53 0.14 150);
    --chart-5: oklch(0.45 0.11 151);
    --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);
}

/* Blue theme */
.theme-blue {
    --chart-1: oklch(0.81 0.1 252);
    --chart-2: oklch(0.62 0.19 260);
    --chart-3: oklch(0.55 0.22 263);
    --chart-4: oklch(0.49 0.22 264);
    --chart-5: oklch(0.42 0.18 266);
    --focus-border: oklch(0.62 0.19 260);
    --focus-ring: oklch(0.62 0.19 260 / 20%);
}

/* Red theme */
.theme-red {
    --chart-1: oklch(0.81 0.1 20);
    --chart-2: oklch(0.64 0.21 25);
    --chart-3: oklch(0.58 0.22 27);
    --chart-4: oklch(0.51 0.19 28);
    --chart-5: oklch(0.44 0.16 27);
    --focus-border: oklch(0.64 0.21 25);
    --focus-ring: oklch(0.64 0.21 25 / 20%);
}

/* Green theme */
.theme-green {
    --chart-1: oklch(0.87 0.14 154);
    --chart-2: oklch(0.72 0.19 150);
    --chart-3: oklch(0.63 0.17 149);
    --chart-4: oklch(0.53 0.14 150);
    --chart-5: oklch(0.45 0.11 151);
    --ring: oklch(0.7 0.15 162);
    --ring-within: oklch(0.7 0.15 162/20%);
}

/* Amber theme */
.theme-amber {
    --chart-1: oklch(0.88 0.15 92);
    --chart-2: oklch(0.77 0.16 70);
    --chart-3: oklch(0.67 0.16 58);
    --chart-4: oklch(0.56 0.15 49);
    --chart-5: oklch(0.47 0.12 46);
}

/* Purple theme */
.theme-purple {
    --chart-1: oklch(0.83 0.11 306);
    --chart-2: oklch(0.63 0.23 304);
    --chart-3: oklch(0.56 0.25 302);
    --chart-4: oklch(0.5 0.24 302);
    --chart-5: oklch(0.44 0.2 304);
}

@keyframes slideFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideToRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(20px);
    }
}

@keyframes slideToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* Viewport scale animations */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: rotateX(-30deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotateX(0deg) scale(1);
    }
}

@keyframes scaleOut {
    from {
        opacity: 1;
        transform: rotateX(0deg) scale(1);
    }
    to {
        opacity: 0;
        transform: rotateX(-10deg) scale(0.95);
    }
}
