/* ================================================
   industry-tech.css
   ================================================
   Violet/slate palette. Technical and modern.
   Supports both light (default) and dark mode toggle.
   All colours derive from --realm-hue.

   Gradient intensity:
     neutral (default) — gentle diagonal, subtle hue shift
     minimal — overridden to flat by visualstyle-minimal.css
     rich    — overridden to expressive by visualstyle-rich.css
   ================================================ */

:root {
    --background:         oklch(0.98 0.005 var(--realm-hue));
    --foreground:         oklch(0.16 0.02  var(--realm-hue));

    --card:               oklch(0.992 0.008 var(--realm-hue));
    --card-foreground:    oklch(0.16 0.02  var(--realm-hue));

    --popover:            oklch(0.995 0.004 var(--realm-hue));
    --popover-foreground: oklch(0.16 0.02  var(--realm-hue));

    --primary:            oklch(0.45 0.18  var(--realm-hue));
    --primary-foreground: oklch(0.98 0.003 var(--realm-hue));

    --secondary:            oklch(0.95 0.006 var(--realm-hue));
    --secondary-foreground: oklch(0.30 0.10  var(--realm-hue));

    --muted:            oklch(0.95 0.006 var(--realm-hue));
    --muted-foreground: oklch(0.55 0.025 var(--realm-hue));

    --accent:            oklch(0.95 0.006 var(--realm-hue));
    --accent-foreground: oklch(0.30 0.10  var(--realm-hue));

    --border: oklch(0.88 0.012 var(--realm-hue));
    --input:  oklch(0.88 0.012 var(--realm-hue));
    --ring:   oklch(0.55 0.16  var(--realm-hue));

    /* Chart colours */
    --chart-1: oklch(0.55 0.20 var(--realm-hue));
    --chart-2: oklch(0.65 0.16 calc(var(--realm-hue) - 30));
    --chart-3: oklch(0.50 0.18 calc(var(--realm-hue) + 40));
    --chart-4: oklch(0.70 0.14 calc(var(--realm-hue) - 60));
    --chart-5: oklch(0.60 0.12 calc(var(--realm-hue) + 80));

    /* Sidebar flat fallback (aside gradient overrides this below) */
    --sidebar-background:         oklch(0.16 0.025 var(--realm-hue));
    --sidebar:                     var(--sidebar-background);
    --sidebar-foreground:         oklch(0.90 0.005 var(--realm-hue));
    --sidebar-primary:            oklch(0.75 0.18  var(--realm-hue));
    --sidebar-primary-foreground: oklch(0.16 0.025 var(--realm-hue));
    --sidebar-accent:             oklch(0.22 0.04  var(--realm-hue));
    --sidebar-accent-foreground:  oklch(0.90 0.005 var(--realm-hue));
    --sidebar-border:             oklch(0.26 0.04  var(--realm-hue));
    --sidebar-ring:               oklch(0.55 0.16  var(--realm-hue));

    /* Surface treatment — tone gradient, light mode.
       Same hue throughout; chroma fades toward neutral as it lightens.
       The page is a quiet canvas — distinction comes from sidebar and
       interactive elements, not background colour. */
    --page-bg: linear-gradient(
        180deg in oklch,
        oklch(0.94 0.010 var(--realm-hue))  0%,
        oklch(0.98 0.003 var(--realm-hue)) 100%
    );
    /* Frosted-glass header */
    --header-bg:              oklch(0.96 0.014 var(--realm-hue) / 0.82);
    --header-border-color:    oklch(0.82 0.022 var(--realm-hue));
    --header-backdrop-filter: blur(12px);
}

/* Dark mode — accent-tinted full token set.
   Activates when user toggles dark (html.dark class).
   Loads after colormode-toggleable.css at equal specificity,
   so this wins and supplies teal-tinted values. */
html.dark {
    --background:         oklch(0.16 0.022 var(--realm-hue));
    --foreground:         oklch(0.92 0.010 var(--realm-hue));

    --card:               oklch(0.20 0.025 var(--realm-hue));
    --card-foreground:    oklch(0.92 0.010 var(--realm-hue));

    --popover:            oklch(0.20 0.025 var(--realm-hue));
    --popover-foreground: oklch(0.92 0.010 var(--realm-hue));

    --primary:            oklch(0.75 0.22  var(--realm-hue));
    --primary-foreground: oklch(0.16 0.022 var(--realm-hue));

    --secondary:            oklch(0.22 0.028 var(--realm-hue));
    --secondary-foreground: oklch(0.92 0.010 var(--realm-hue));

    --muted:            oklch(0.22 0.028 var(--realm-hue));
    --muted-foreground: oklch(0.62 0.035 var(--realm-hue));

    --accent:            oklch(0.22 0.028 var(--realm-hue));
    --accent-foreground: oklch(0.92 0.010 var(--realm-hue));

    --border: oklch(0.30 0.040 var(--realm-hue));
    --input:  oklch(0.30 0.040 var(--realm-hue));
    --ring:   oklch(0.75 0.22  var(--realm-hue));

    /* Surface treatment — tone gradient, dark mode.
       Same hue, chroma fades as lightness rises slightly toward mid. */
    --page-bg: linear-gradient(
        180deg in oklch,
        oklch(0.13 0.024 var(--realm-hue))  0%,
        oklch(0.18 0.014 var(--realm-hue)) 100%
    );
    --header-bg:              oklch(0.16 0.028 var(--realm-hue) / 0.85);
    --header-border-color:    oklch(0.30 0.040 var(--realm-hue));
    --header-backdrop-filter: blur(12px);
}

/* Sidebar — if the realm supplies explicit colours via --sidebar-background
   (injected on <html> from realmstyles.json), that value wins.
   Otherwise falls back to the industry-specific shade gradient.
   BbSidebar renders as a plain <aside> — no data attributes.
   Unlayered rule beats Tailwind/BlazorBlueprint @layer styles. */
aside {
    background: var(--sidebar-background, radial-gradient(
        in oklch ellipse 220% 60% at 50% -10%,
        oklch(0.36 0.14 var(--realm-hue-2, calc(var(--realm-hue) + 30))) 0%,
        oklch(0.18 0.030 var(--realm-hue)) 45%,
        oklch(0.12 0.022 var(--realm-hue)) 100%
    )) !important;
}