@import "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";

:root {
    --background: oklch(98% 0 0);
    --font-color: oklch(25% 0 102.07);
    --font-color-muted: oklch(55% 0 102.07);
    --dev: oklch(78% 0.348 231.09);
    --beyond: oklch(75% 0.227 32.82);
    --accent: oklch(89% 0.05 135);
    --interactive: oklch(92% 0 102.07);
    --dev1: oklch(78% 0.348 231.09);
    --dev2: oklch(82% 0.448 216.09);
    --dev3: oklch(72% 0.348 221.09);
    --dev4: oklch(78% 0.248 211.09);
    --dev5: oklch(80% 0.348 251.09);
    --dev6: oklch(74% 0.448 261.09);
    --beyond1: oklch(75% 0.227 32.82);
    --beyond2: oklch(70% 0.327 37.82);
    --beyond3: oklch(80% 0.127 27.82);
    --beyond4: oklch(75% 0.227 17.82);
    --beyond5: oklch(78% 0.127 47.82);
    --beyond6: oklch(73% 0.327 52.82);
    --success: oklch(65% 0.28 145);
    --error: oklch(60% 0.28 27);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --background: oklch(16% 0 0);
        --font-color: oklch(90% 0 0);
        --font-color-muted: oklch(72% 0 0);
        --dev: oklch(65% 0.2 210);
        --beyond: oklch(70% 0.22 45);
        --accent: oklch(89% 0.09 135);
        --interactive: oklch(39.66% 0 102.07);
        --dev1: oklch(65% 0.2 210);
        --dev2: oklch(72% 0.22 215);
        --dev3: oklch(58% 0.18 205);
        --dev4: oklch(68% 0.16 220);
        --dev5: oklch(70% 0.14 225);
        --dev6: oklch(62% 0.18 230);
        --beyond1: oklch(70% 0.22 45);
        --beyond2: oklch(75% 0.24 42);
        --beyond3: oklch(72% 0.18 48);
        --beyond4: oklch(68% 0.22 52);
        --beyond5: oklch(73% 0.2 40);
        --beyond6: oklch(76% 0.22 60);
        --success: oklch(68% 0.3 145);
        --error: oklch(65% 0.35 30);
    }
}

@theme inline {
    --font-serif: var(--font-swiss-works);
    --font-mono: var(--font-berkeley-mono);
    --font-sans: var(--font-open-sans);
}

@theme {
    /* Colors */
    --color-background: var(--background);
    --color-font-color: var(--font-color);
    --color-font-color-muted: var(--font-color-muted);
    --color-dev: var(--dev);
    --color-beyond: var(--beyond);
    --color-accent: var(--accent);
    --color-interactive: var(--interactive);
    --color-success: var(--success);
    --color-gradient-error: var(--error);
    --color-gradient-dev1: var(--dev1);
    --color-gradient-dev2: var(--dev2);
    --color-gradient-dev3: var(--dev3);
    --color-gradient-dev4: var(--dev4);
    --color-gradient-dev5: var(--dev5);
    --color-gradient-dev6: var(--dev6);
    --color-gradient-beyond1: var(--beyond1);
    --color-gradient-beyond2: var(--beyond2);
    --color-gradient-beyond3: var(--beyond3);
    --color-gradient-beyond4: var(--beyond4);
    --color-gradient-beyond5: var(--beyond5);
    --color-gradient-beyond6: var(--beyond6);
    --color-success: var(--success);
    --color-error: var(--error);

    /* Animation */
    --animate-fade-in-up: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    --animate-gentle-slide: gentleSlide 1.5s ease-in-out 2 forwards;

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(40px);
            filter: blur(4px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }

    @keyframes gentleSlide {
        0%: {
            transform: translateX(0);
            opacity: 1;
        }
        50%: {
            transform: translateX(4px);
            opacity: 0.8;
        }
        100%: {
            transform: translateX(0);
            opacity: 1;
        }
    }
}

@layer utilities {
    .font-thin {
        font-variation-settings: "wght" 100;
    }
    .font-extralight {
        font-variation-settings: "wght" 200;
    }
    .font-light {
        font-variation-settings: "wght" 300;
    }
    .font-normal {
        font-variation-settings: "wght" 400;
    }
    .font-medium {
        font-variation-settings: "wght" 500;
    }
    .font-semibold {
        font-variation-settings: "wght" 600;
    }
    .font-bold {
        font-variation-settings: "wght" 700;
    }
    .font-extrabold {
        font-variation-settings: "wght" 800;
    }
    .font-black {
        font-variation-settings: "wght" 900;
    }
}
