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

  /* NGCP brand green (from the logo swatches: #147d54, #2da172, #30b876, #00bc33) */
  --primary: #147d54;
  --primary-foreground: #ffffff;

  --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: #2da172;

  --radius: 0.5rem;

  /* NGCP green scale for charts */
  --chart-1: #147d54;
  --chart-2: #2da172;
  --chart-3: #30b876;
  --chart-4: #00bc33;
  --chart-5: #7de3a2;

  /* Sidebar variables — light tinted active item, like the NGCP UI sprint */
  --sidebar-background: #fafafa;
  --sidebar-foreground: #09090b;
  --sidebar-primary: #147d54;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e8f5ee;
  --sidebar-accent-foreground: #147d54;
  --sidebar-border: oklch(0.922 0 0);
  --sidebar-ring: #2da172;

  /* 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);
}

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

  /* Keep the brand green readable on dark surfaces */
  --primary: #30b876;
  --primary-foreground: #05231a;

  --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: #2da172;

  --chart-1: #30b876;
  --chart-2: #2da172;
  --chart-3: #7de3a2;
  --chart-4: #147d54;
  --chart-5: #00bc33;

  /* Sidebar variables (dark) */
  --sidebar-background: #131715;
  --sidebar-foreground: oklch(0.985 0 0);
  --sidebar-primary: #30b876;
  --sidebar-primary-foreground: #05231a;
  --sidebar-accent: #1d2b24;
  --sidebar-accent-foreground: #7de3a2;
  --sidebar-border: oklch(0.269 0 0);
  --sidebar-ring: #2da172;

  /* 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);
}