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

@layer base {
    :root {
        --radius: 0.5rem;
        --background: 0.985 0.001 106.424;
        /* oklch components if using tailwind 4, but for T3 we use values */
        /* Reverting to hex/standard values or using the T3 CSS var format */
        /* Actually, copying the Oklch values is fine if we use postcss-preset-env or if browser supports it. 
       Tailwind 3 doesn't automatically parse "0.985 0.001 106.424" without "oklch(...)".
       The previous CSS file used `oklch(...)`. I should use that.
    */
        --background: oklch(0.985 0.001 106.424);
        --foreground: oklch(0.216 0.006 56.043);
        --card: oklch(1 0 0);
        --card-foreground: oklch(0.216 0.006 56.043);
        --popover: oklch(1 0 0);
        --popover-foreground: oklch(0.216 0.006 56.043);
        --primary: oklch(0.216 0.006 56.043);
        --primary-foreground: oklch(0.985 0.001 106.424);
        --secondary: oklch(0.970 0.001 106.424);
        --secondary-foreground: oklch(0.216 0.006 56.043);
        --muted: oklch(0.970 0.001 106.424);
        --muted-foreground: oklch(0.370 0.010 67.558);
        --accent: oklch(0.970 0.001 106.424);
        --accent-foreground: oklch(0.216 0.006 56.043);
        --destructive: oklch(0.586 0.253 17.585);
        --destructive-foreground: oklch(0.985 0.001 106.424);
        /* Added missing dest-bg */
        --border: oklch(0.923 0.003 48.717);
        --input: oklch(0.923 0.003 48.717);
        --ring: oklch(0.553 0.013 58.071);

        --chart-1: oklch(0.532 0.157 131.589);
        --chart-2: oklch(0.6 0.118 184.704);
        --chart-3: oklch(0.398 0.07 227.392);
        --chart-4: oklch(0.828 0.189 84.429);
        --chart-5: oklch(0.769 0.188 70.08);

        --sidebar: oklch(0.985 0.001 106.424);
        --sidebar-foreground: oklch(0.216 0.006 56.043);
        --sidebar-primary: oklch(0.216 0.006 56.043);
        --sidebar-primary-foreground: oklch(0.985 0.001 106.424);
        --sidebar-accent: oklch(0.970 0.001 106.424);
        --sidebar-accent-foreground: oklch(0.216 0.006 56.043);
        --sidebar-border: oklch(0.923 0.003 48.717);
        --sidebar-ring: oklch(0.553 0.013 58.071);

        --font-display: "DM Sans", system-ui, sans-serif;
        --font-sans: "DM Sans", system-ui, sans-serif;
        --font-mono: "IBM Plex Mono", ui-monospace, monospace;
    }

    .dark {
        --background: oklch(0.216 0.006 56.043);
        --foreground: oklch(0.985 0.001 106.424);
        --card: oklch(0.268 0.007 34.298);
        --card-foreground: oklch(0.985 0.001 106.424);
        --popover: oklch(0.268 0.007 34.298);
        --popover-foreground: oklch(0.985 0.001 106.424);
        --primary: oklch(0.923 0.003 48.717);
        --primary-foreground: oklch(0.216 0.006 56.043);
        --secondary: oklch(0.318 0.008 43.185);
        --secondary-foreground: oklch(0.985 0.001 106.424);
        --muted: oklch(0.318 0.008 43.185);
        --muted-foreground: oklch(0.709 0.01 56.259);
        --accent: oklch(0.318 0.008 43.185);
        --accent-foreground: oklch(0.985 0.001 106.424);
        --destructive: oklch(0.712 0.194 13.428);
        --destructive-foreground: oklch(0.985 0.001 106.424);
        --border: oklch(0.370 0.010 67.558);
        --input: oklch(0.370 0.010 67.558);
        --ring: oklch(0.553 0.013 58.071);

        --chart-1: oklch(0.648 0.2 131.684);
        --chart-2: oklch(0.696 0.17 162.48);
        --chart-3: oklch(0.769 0.188 70.08);
        --chart-4: oklch(0.627 0.265 303.9);
        --chart-5: oklch(0.645 0.246 16.439);

        --sidebar: oklch(0.268 0.007 34.298);
        --sidebar-foreground: oklch(0.985 0.001 106.424);
        --sidebar-primary: oklch(0.648 0.2 131.684);
        --sidebar-primary-foreground: oklch(0.216 0.006 56.043);
        --sidebar-accent: oklch(0.318 0.008 43.185);
        --sidebar-accent-foreground: oklch(0.985 0.001 106.424);
        --sidebar-border: oklch(0.370 0.010 67.558);
        --sidebar-ring: oklch(0.553 0.013 58.071);
    }
}

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

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