/* ================================================
   colormode-toggleable.css
   ================================================
   Accent-tinted dark palette activated ONLY by the
   html.dark class — used for StartWithLight and
   StartWithDark modes where dark is user-toggled,
   not forced via :root.

   Unlike colormode-dark.css (which targets :root so
   the page is always dark), this file activates only
   when the user has toggled dark mode.

   Industry palette files load after this file and
   may override specific vars with deeper tints.
   ================================================ */

html.dark {
    --background:         oklch(0.16 0.02  var(--realm-hue));
    --foreground:         oklch(0.92 0.01  var(--realm-hue));

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

    --popover:            oklch(0.20 0.025 var(--realm-hue));
    --popover-foreground: oklch(0.92 0.01  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.01  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.01  var(--realm-hue));

    --destructive:            oklch(0.60 0.22 15);
    --destructive-foreground: oklch(0.95 0 0);

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

    /* Sidebar */
    --sidebar-background:         oklch(0.14 0.015 var(--realm-hue));
    --sidebar:                     var(--sidebar-background);
    --sidebar-foreground:         oklch(0.70 0.02  var(--realm-hue));
    --sidebar-primary:            oklch(0.75 0.22  var(--realm-hue));
    --sidebar-primary-foreground: oklch(0.14 0.015 var(--realm-hue));
    --sidebar-accent:             oklch(0.22 0.028 var(--realm-hue));
    --sidebar-accent-foreground:  oklch(0.92 0.01  var(--realm-hue));
    --sidebar-border:             oklch(0.30 0.040 var(--realm-hue));
    --sidebar-ring:               oklch(0.75 0.22  var(--realm-hue));

    /* Surface treatment — industry files load after and may override these.
       Same-hue gradient so oklab (no hue rotation) is appropriate here. */
    --page-bg: linear-gradient(
        180deg in oklab,
        oklch(0.13 0.025 var(--realm-hue)) 0%,
        oklch(0.16 0.018 var(--realm-hue)) 100%
    );
    --header-bg:              oklch(0.19 0.028 var(--realm-hue) / 0.90);
    --header-border-color:    oklch(0.32 0.050 var(--realm-hue));
    --header-backdrop-filter: blur(12px);

    /* Alert colours */
    --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 var(--realm-hue));
    --alert-info-foreground:    oklch(0.90 0.05 var(--realm-hue));
    --alert-info-bg:            oklch(0.18 0.008 var(--realm-hue));
    --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);
}