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

  /* Dimension baselines — overridden by wwwroot/css/dim/ files */
  --realm-hue: 260;
  --realm-hue-2: calc(var(--realm-hue) + 30);   /* second gradient / accent hue; always set by C# resolver */
  --density-scale: 1;
  --transition-duration: 150ms;
  --transition-duration-fast: 75ms;
  --transition-duration-slow: 300ms;
  --shadow-sm: none;
  --shadow:    none;
  --shadow-md: none;
  --shadow-lg: none;

  /* Surface treatment — overridden by industry palette files */
  --page-bg:                 var(--background);
  --header-bg:               var(--background);
  --header-border-color:     var(--border);
  --header-backdrop-filter:  none;

  --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: var(--sidebar-background); /* alias used by blazorblueprint.css bg-sidebar */
  --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);

  /* ── Browser autofill override ─────────────────────────────────────────
     Chrome/Edge apply a yellow background to autofilled fields that cannot
     be removed via background-color. Covering it with an inset box-shadow
     of the correct input colour is the only reliable workaround.
     -webkit-text-fill-color overrides the text inside autofilled fields. */

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

/* html.dark has specificity 0,1,1 — beats :root (0,1,0) from realm theme files
   that redefine these variables without a dark counterpart. */
html.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: var(--sidebar-background); /* alias used by blazorblueprint.css bg-sidebar */
  --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);
}

/* ── Browser autofill yellow override ──────────────────────────────────────
   Chrome/Edge stamp a yellow background on autofilled fields that cannot be
   removed via background-color. Covering it with an inset box-shadow of the
   realm's --input colour is the standard workaround.
   Works for every realm because it reads the current CSS custom property. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
textarea:-webkit-autofill,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 60px var(--input, var(--background)) inset !important;
    box-shadow:         0 0 0 60px var(--input, var(--background)) inset !important;
    -webkit-text-fill-color: var(--foreground) !important;
    caret-color:             var(--foreground) !important;
}