:root {
    /* Dark Theme by default based on reference */
    --background: oklch(0.145 0 0);
    /* #18181b - Very dark background */
    --foreground: oklch(0.980 0 0);
    /* #fafafa - White text */
    --card: oklch(0.200 0 0);
    /* #27272a - Dark card background */
    --card-foreground: oklch(0.980 0 0);

    --popover: oklch(0.200 0 0);
    --popover-foreground: oklch(0.980 0 0);

    --primary: oklch(0.623 0.214 149.214);
    /* #22c55e - Vibrant Green */
    --primary-foreground: oklch(0.145 0 0);
    /* Dark text on green */

    --secondary: oklch(0.270 0 0);
    /* #3f3f46 - Secondary dark gray */
    --secondary-foreground: oklch(0.980 0 0);

    --muted: oklch(0.270 0 0);
    --muted-foreground: oklch(0.650 0 0);
    /* #a1a1aa - Muted text */

    --accent: oklch(0.623 0.214 149.214);
    --accent-foreground: oklch(0.145 0 0);

    --destructive: oklch(0.6368 0.2078 25.3313);
    --destructive-foreground: oklch(1.0000 0 0);

    --border: oklch(0.270 0 0);
    /* Dark border */
    --input: oklch(0.270 0 0);
    --ring: oklch(0.623 0.214 149.214);
    /* Green ring */

    --chart-1: oklch(0.623 0.214 149.214);
    --chart-2: oklch(0.270 0 0);

    /* Sidebar variables same as main for now */
    --sidebar: oklch(0.145 0 0);
    --sidebar-foreground: oklch(0.980 0 0);
    --sidebar-primary: oklch(0.623 0.214 149.214);
    --sidebar-primary-foreground: oklch(0.145 0 0);
    --sidebar-accent: oklch(0.270 0 0);
    --sidebar-accent-foreground: oklch(0.980 0 0);
    --sidebar-border: oklch(0.270 0 0);
    --sidebar-ring: oklch(0.623 0.214 149.214);

    --font-sans: Poppins, sans-serif;
    --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    --font-mono: Roboto Mono, monospace;
    --radius: 0.5rem;

    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}

/* Remove separate .dark block as we are making this default */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-sans);
    background-color: var(--background);
    color: var(--foreground);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    margin-top: 0;
}

a {
    color: var(--primary);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
}

.btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    background-color: var(--primary);
    color: var(--primary-foreground);
    border: none;
    cursor: pointer;
    font-weight: 500;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.9;
    text-decoration: none;
}