@layer theme {
    :root {
        --color-red-50: oklch(97.1% 0.013 17.38);
        --color-red-300: oklch(80.8% 0.114 19.571);
        --color-red-400: oklch(70.4% 0.191 22.216);
        --color-red-500: oklch(63.7% 0.237 25.331);
        --color-red-600: oklch(57.7% 0.245 27.325);
        --color-blue-400: oklch(70.7% 0.165 254.624);
        --color-gray-50: oklch(98.5% 0.002 247.839);
        --color-gray-600: oklch(44.6% 0.03 256.802);
        --color-gray-900: oklch(21% 0.034 264.665);
        --color-black: #000000;
        --spacing: 0.25rem;
        --container-xs: 20rem;
        --container-sm: 24rem;
        --container-md: 28rem;
        --container-lg: 32rem;
        --container-2xl: 42rem;
        --container-3xl: 48rem;
        --container-4xl: 56rem;
        --container-5xl: 64rem;
        --font-weight-normal: 400;
        --font-weight-medium: 500;
        --font-weight-semibold: 600;
        --font-weight-bold: 700;
        --tracking-tighter: -0.05em;
        --tracking-tight: -0.025em;
        --tracking-wider: 0.05em;
        --tracking-widest: 0.1em;
        --leading-snug: 1.375;
        --leading-normal: 1.5;
        --leading-relaxed: 1.625;
        --radius-2xl: 1rem;
        --radius: 0.5rem;
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
        --animate-spin: spin 1s linear infinite;
        --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        --blur-md: 12px;
        --aspect-video: 16/9;
        --default-transition-duration: 0.15s;
        --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

        /* Theme Color Tokens */
        --button-outline: rgba(0, 0, 0, 0.1);
        --badge-outline: rgba(0, 0, 0, 0.05);
        --opaque-button-border-intensity: -8;
        --elevate-1: rgba(0, 0, 0, 0.03);
        --elevate-2: rgba(0, 0, 0, 0.08);
        --background: 0 0% 100%;
        --foreground: 222 47% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --card-border: 214 32% 91%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 47% 11%;
        --popover-border: 214 32% 91%;
        --primary: 200 98% 39%;
        --primary-foreground: 0 0% 100%;
        --secondary: 210 40% 96%;
        --secondary-foreground: 222 47% 11%;
        --muted: 210 40% 96%;
        --muted-foreground: 215 16% 47%;
        --accent: 210 40% 96%;
        --accent-foreground: 222 47% 11%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 210 40% 98%;
        --border: 214 32% 91%;
        --input: 214 32% 91%;
        --ring: 200 98% 39%;
        --primary-border: hsl(from hsl(var(--primary)) h s calc(l + var(--opaque-button-border-intensity))/alpha);
        
        --app-font-sans: "Inter", system-ui, -apple-system, sans-serif;
        --app-font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", monospace;
        --default-font-family: var(--app-font-sans);
        --default-mono-font-family: var(--app-font-mono);
    }
}

@layer base {
    *, ::after, ::before, ::backdrop {
        box-sizing: border-box;
        border: 0 solid hsl(var(--border));
        margin: 0;
        padding: 0;
    }

    html {
        -webkit-text-size-adjust: 100%;
        tab-size: 4;
        line-height: 1.5;
        font-family: var(--default-font-family);
        -webkit-tap-highlight-color: transparent;
    }

    body {
        background-color: hsl(var(--background));
        font-family: var(--app-font-sans);
        color: hsl(var(--foreground));
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    h1, h2, h3, h4 { font-size: inherit; }
    a { color: inherit; text-decoration: inherit; }
    ol, ul { list-style: none; }
    img, svg { vertical-align: middle; display: block; }
    img { max-width: 100%; }

    button, input, textarea {
        font: inherit;
        color: inherit;
        background-color: transparent;
        border-radius: 0;
    }

    textarea { resize: vertical; }
    button { appearance: button; cursor: pointer; }
}

@layer utilities {
    .pointer-events-none { pointer-events: none; }
    .absolute { position: absolute; }
    .fixed { position: fixed; }
    .relative { position: relative; }
    .inset-0 { inset: 0; }
    .top-0 { top: 0; }
    .right-0 { right: 0; }
    .left-0 { left: 0; }
    .z-0 { z-index: 0; }
    .z-10 { z-index: 10; }
    .z-20 { z-index: 20; }
    .z-50 { z-index: 50; }

    .container { width: 100%; }
    @media (min-width: 40rem) { .container { max-width: 40rem; } }
    @media (min-width: 48rem) { .container { max-width: 48rem; } }
    @media (min-width: 64rem) { .container { max-width: 64rem; } }
    @media (min-width: 80rem) { .container { max-width: 80rem; } }
    @media (min-width: 96rem) { .container { max-width: 96rem; } }

    .mx-auto { margin-inline: auto; }
    .mr-2 { margin-right: calc(var(--spacing) * 2); }
    .mb-2 { margin-bottom: calc(var(--spacing) * 2); }
    .mb-3 { margin-bottom: calc(var(--spacing) * 3); }
    .mb-4 { margin-bottom: calc(var(--spacing) * 4); }
    .mb-6 { margin-bottom: calc(var(--spacing) * 6); }
    .mb-8 { margin-bottom: calc(var(--spacing) * 8); }
    .mb-10 { margin-bottom: calc(var(--spacing) * 10); }
    .mb-12 { margin-bottom: calc(var(--spacing) * 12); }
    .mb-16 { margin-bottom: calc(var(--spacing) * 16); }
    .ml-1 { margin-left: var(--spacing); }
    .ml-2 { margin-left: calc(var(--spacing) * 2); }

    .flex { display: flex; }
    .grid { display: grid; }
    .hidden { display: none; }
    .inline-flex { display: inline-flex; }

    .h-2 { height: calc(var(--spacing) * 2); }
    .h-4 { height: calc(var(--spacing) * 4); }
    .h-5 { height: calc(var(--spacing) * 5); }
    .h-6 { height: calc(var(--spacing) * 6); }
    .h-8 { height: calc(var(--spacing) * 8); }
    .h-9 { height: calc(var(--spacing) * 9); }
    .h-10 { height: calc(var(--spacing) * 10); }
    .h-12 { height: calc(var(--spacing) * 12); }
    .h-16 { height: calc(var(--spacing) * 16); }
    .h-20 { height: calc(var(--spacing) * 20); }
    .h-full { height: 100%; }
    .min-h-9 { min-height: calc(var(--spacing) * 9); }
    .min-h-10 { min-height: calc(var(--spacing) * 10); }
    .min-h-\[90vh\] { min-height: 90vh; }
    .min-h-\[120px\] { min-height: 120px; }
    .min-h-screen { min-height: 100vh; }

    .w-2 { width: calc(var(--spacing) * 2); }
    .w-4 { width: calc(var(--spacing) * 4); }
    .w-5 { width: calc(var(--spacing) * 5); }
    .w-6 { width: calc(var(--spacing) * 6); }
    .w-8 { width: calc(var(--spacing) * 8); }
    .w-10 { width: calc(var(--spacing) * 10); }
    .w-12 { width: calc(var(--spacing) * 12); }
    .w-16 { width: calc(var(--spacing) * 16); }
    .w-full { width: 100%; }

    .max-w-2xl { max-width: var(--container-2xl); }
    .max-w-4xl { max-width: var(--container-4xl); }
    .max-w-5xl { max-width: var(--container-5xl); }
    .max-w-xs { max-width: var(--container-xs); }

    .flex-grow { flex-grow: 1; }
    .shrink-0 { flex-shrink: 0; }

    .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
    .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-end { align-items: flex-end; }
    .items-start { align-items: flex-start; }
    .justify-between { justify-content: space-between; }
    .justify-center { justify-content: center; }

    .gap-2 { gap: calc(var(--spacing) * 2); }
    .gap-4 { gap: calc(var(--spacing) * 4); }
    .gap-6 { gap: calc(var(--spacing) * 6); }
    .gap-8 { gap: calc(var(--spacing) * 8); }
    .gap-12 { gap: calc(var(--spacing) * 12); }
    .gap-16 { gap: calc(var(--spacing) * 16); }

    .space-y-2 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 2); }
    .space-y-3 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 3); }
    .space-y-6 > :not(:last-child) { margin-bottom: calc(var(--spacing) * 6); }

    .overflow-hidden { overflow: hidden; }
    .rounded { border-radius: 0.25rem; }
    .rounded-md { border-radius: calc(var(--radius) - 2px); }
    .rounded-lg { border-radius: var(--radius); }
    .rounded-2xl { border-radius: var(--radius-2xl); }
    .rounded-full { border-radius: 9999px; }

    .border { border-style: solid; border-width: 1px; }
    .border-y { border-block-style: solid; border-block-width: 1px; }
    .border-t { border-top-style: solid; border-top-width: 1px; }
    .border-b { border-bottom-style: solid; border-bottom-width: 1px; }

    .border-border { border-color: hsl(var(--border)); }
    .border-input { border-color: hsl(var(--input)); }
    .border-primary-border { border-color: var(--primary-border); }
    .border-primary\/30 { border-color: color-mix(in oklab, hsl(var(--primary)) 30%, transparent); }

    .bg-background { background-color: hsl(var(--background)); }
    .bg-card { background-color: hsl(var(--card)); }
    .bg-muted { background-color: hsl(var(--muted)); }
    .bg-primary { background-color: hsl(var(--primary)); }
    .bg-primary\/10 { background-color: color-mix(in oklab, hsl(var(--primary)) 10%, transparent); }

    .bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); }
    .bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)); }
    .bg-clip-text { -webkit-background-clip: text; background-clip: text; }

    .from-primary { --tw-gradient-from: hsl(var(--primary)); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, transparent); }
    .to-blue-400 { --tw-gradient-to: var(--color-blue-400); }

    .p-2 { padding: calc(var(--spacing) * 2); }
    .p-8 { padding: calc(var(--spacing) * 8); }
    .px-3 { padding-inline: calc(var(--spacing) * 3); }
    .px-4 { padding-inline: calc(var(--spacing) * 4); }
    .px-6 { padding-inline: calc(var(--spacing) * 6); }
    .px-8 { padding-inline: calc(var(--spacing) * 8); }
    .py-1 { padding-block: var(--spacing); }
    .py-2 { padding-block: calc(var(--spacing) * 2); }
    .py-3 { padding-block: calc(var(--spacing) * 3); }
    .py-20 { padding-block: calc(var(--spacing) * 20); }
    .py-24 { padding-block: calc(var(--spacing) * 24); }
    .pt-8 { padding-top: calc(var(--spacing) * 8); }
    .pt-16 { padding-top: calc(var(--spacing) * 16); }
    .pt-20 { padding-top: calc(var(--spacing) * 20); }
    .pb-8 { padding-bottom: calc(var(--spacing) * 8); }

    .text-center { text-align: center; }
    .font-mono { font-family: var(--app-font-mono); }
    .text-xs { font-size: 0.75rem; line-height: 1rem; }
    .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
    .text-base { font-size: 1rem; line-height: 1.5rem; }
    .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
    .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
    .text-2xl { font-size: 1.5rem; line-height: 2rem; }
    .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
    .text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    .text-5xl { font-size: 3rem; line-height: 1; }

    .font-medium { font-weight: var(--font-weight-medium); }
    .font-semibold { font-weight: var(--font-weight-semibold); }
    .font-bold { font-weight: var(--font-weight-bold); }

    .tracking-tight { letter-spacing: var(--tracking-tight); }
    .tracking-tighter { letter-spacing: var(--tracking-tighter); }
    .tracking-wider { letter-spacing: var(--tracking-wider); }
    .whitespace-nowrap { white-space: nowrap; }

    .text-foreground { color: hsl(var(--foreground)); }
    .text-muted-foreground { color: hsl(var(--muted-foreground)); }
    .text-primary { color: hsl(var(--primary)); }
    .text-primary-foreground { color: hsl(var(--primary-foreground)); }
    .text-transparent { color: transparent; }
    .uppercase { text-transform: uppercase; }
    .opacity-20 { opacity: 0.2; }

    .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
    .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
    .shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); }

    .backdrop-blur-md { backdrop-filter: blur(var(--blur-md)); -webkit-backdrop-filter: blur(var(--blur-md)); }
    .transition-colors { transition-property: color, background-color, border-color; transition-duration: var(--default-transition-duration); }
    .transition-transform { transition-property: transform; transition-duration: var(--default-transition-duration); }

    @media (hover: hover) {
        .hover\:border-primary:hover { border-color: hsl(var(--primary)); }
        .hover\:border-primary\/50:hover { border-color: color-mix(in oklab, hsl(var(--primary)) 50%, transparent); }
        .hover\:bg-card:hover { background-color: hsl(var(--card)); }
        .hover\:text-primary:hover { color: hsl(var(--primary)); }
        .group:hover .group-hover\:scale-105 { transform: scale(1.05); }
        .group:hover .group-hover\:scale-110 { transform: scale(1.10); }
        .group:hover .group-hover\:translate-x-1 { transform: translateX(0.25rem); }
    }

    @media (min-width: 48rem) {
        .md\:col-span-1 { grid-column: span 1 / span 1; }
        .md\:flex { display: flex; }
        .md\:hidden { display: none; }
        .md\:w-auto { width: auto; }
        .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
        .md\:flex-row { flex-direction: row; }
        .md\:gap-12 { gap: calc(var(--spacing) * 12); }
        .md\:px-6 { padding-inline: calc(var(--spacing) * 6); }
        .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
        .md\:text-5xl { font-size: 3rem; line-height: 1; }
        .md\:text-7xl { font-size: 4.5rem; line-height: 1; }
    }

    @media (min-width: 64rem) {
        .lg\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.5; } }