/* BlazorBlueprint Default Theme - OKLCH Color Space
 * Based on shadcn/ui default theme
 * Customize these CSS variables to create your own theme
 */

:root {
    --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);
    --destructive-foreground: oklch(1 0 0);

    --border: oklch(0.922 0 0);
    --input: oklch(0.922 0 0);
    --ring: oklch(0.708 0 0);

    --radius: 0.5rem;

    --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);

    /* Sidebar variables */
    --sidebar-background: 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);

    /* Alert colors */
    --alert-success: oklch(0.55 0.20 142);
    --alert-success-foreground: oklch(0.30 0.09 142);
    --alert-success-bg: oklch(0.993 0.003 142);
    --alert-info: oklch(0.50 0.20 255);
    --alert-info-foreground: oklch(0.30 0.10 255);
    --alert-info-bg: oklch(0.993 0.003 255);
    --alert-warning: oklch(0.68 0.18 55);
    --alert-warning-foreground: oklch(0.35 0.10 55);
    --alert-warning-bg: oklch(0.995 0.003 55);
    --alert-danger: oklch(0.55 0.22 27);
    --alert-danger-foreground: oklch(0.30 0.12 27);
    --alert-danger-bg: oklch(0.993 0.003 27);

    .light-mode-icon {
        display: block;
    }

    .dark-mode-icon {
        display: none;
    }
}

.dark {
    --background: oklch(0.145 0 0);
    --foreground: oklch(0.985 0 0);

    --card: oklch(0.145 0 0);
    --card-foreground: oklch(0.985 0 0);

    --popover: oklch(0.145 0 0);
    --popover-foreground: oklch(0.985 0 0);

    --primary: oklch(0.985 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.396 0.141 25.723);
    --destructive-foreground: oklch(0.985 0 0);

    --border: oklch(0.269 0 0);
    --input: oklch(0.269 0 0);
    --ring: oklch(0.556 0 0);

    --chart-1: oklch(0.488 0.243 264.376);
    --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 variables */
    --sidebar-background: oklch(0.205 0 0);
    --sidebar-foreground: oklch(0.985 0 0);
    --sidebar-primary: oklch(0.985 0 0);
    --sidebar-primary-foreground: oklch(0.205 0 0);
    --sidebar-accent: oklch(0.269 0 0);
    --sidebar-accent-foreground: oklch(0.985 0 0);
    --sidebar-border: oklch(0.269 0 0);
    --sidebar-ring: oklch(0.556 0 0);

    /* Alert colors */
    --alert-success: oklch(0.60 0.18 142);
    --alert-success-foreground: oklch(0.90 0.06 142);
    --alert-success-bg: oklch(0.18 0.008 142);
    --alert-info: oklch(0.55 0.18 255);
    --alert-info-foreground: oklch(0.90 0.05 255);
    --alert-info-bg: oklch(0.18 0.008 255);
    --alert-warning: oklch(0.65 0.16 55);
    --alert-warning-foreground: oklch(0.92 0.06 55);
    --alert-warning-bg: oklch(0.19 0.008 55);
    --alert-danger: oklch(0.55 0.20 27);
    --alert-danger-foreground: oklch(0.90 0.06 27);
    --alert-danger-bg: oklch(0.18 0.008 27);

    .light-mode-icon {
        display: none;
    }

    .dark-mode-icon {
        display: block;
    }
}