/*!
 * ZIC Theme — Layer 3 · Dark palette
 * ============================================================================
 *
 * Matched to `[data-bs-theme="dark"]` (Materio's native switch) and to
 * `html.dark-style` (the ZIC class contract). The switcher writes both, so
 * either selector alone re-themes the app.
 *
 * Depth model: the canvas is the deepest tone (#0F172A) and elevation moves
 * *lighter* (#1E293B raised, #334155 floating) — the inverse of the light
 * theme's shadow-only elevation. Shadows are deepened to 40-60% black, because
 * on a dark canvas a light shadow reads as a glow.
 *
 * Status hues are lifted a full step (Tailwind 400 rather than 600/700) so
 * they hold contrast against dark surfaces, while the interactive blues are
 * deliberately desaturated to blunt the afterimage strain of saturated blue
 * on near-black.
 *
 * Every `-text` value is >= 4.5:1 on all three opaque surfaces; every `-fill`
 * is >= 4.5:1 against its `-contrast`. See docs/UI_THEME_GUIDE.md.
 */

[data-bs-theme="dark"],
html.dark-style {
  color-scheme: dark;

  /* ---------------------------------------------------------------------
   * Surfaces
   * ------------------------------------------------------------------ */
  --zic-surface-primary: #1e293b;          /* raised: cards, panels, navbar, sidebar */
  --zic-surface-primary-rgb: 30, 41, 59;
  --zic-surface-secondary: #0f172a;        /* canvas behind the raised surface       */
  --zic-surface-secondary-rgb: 15, 23, 42;
  --zic-surface-elevated: #334155;         /* floating: dropdown, modal, popover     */
  --zic-surface-elevated-rgb: 51, 65, 85;
  --zic-surface-tertiary: #111a2e;         /* recessed: table heads, wells           */
  --zic-surface-tertiary-rgb: 17, 26, 46;
  --zic-surface-overlay: rgba(2, 6, 23, 0.65);

  /* ---------------------------------------------------------------------
   * Text
   * ------------------------------------------------------------------ */
  --zic-text-primary: #f1f5f9;             /* 13.4:1 on raised                    */
  --zic-text-primary-rgb: 241, 245, 249;
  --zic-text-secondary: #cbd5e1;           /*  9.9:1 on raised                    */
  --zic-text-secondary-rgb: 203, 213, 225;
  --zic-text-disabled: #94a3b8;            /* non-text per WCAG 1.4.3             */
  --zic-text-inverse: #0f172a;             /* text on a light fill                */

  /* Slightly less transparent than light: on a dark surface a 0.5 control
     recedes further than it does on white. */
  --zic-control-disabled-opacity: 0.6;

  /* ---------------------------------------------------------------------
   * Borders
   * ------------------------------------------------------------------ */
  --zic-border-default: #334155;
  --zic-border-strong: #475569;
  --zic-border-focus: #60a5fa;

  /* ---------------------------------------------------------------------
   * Brand & interactive blues — desaturated for dark-surface comfort.
   * ------------------------------------------------------------------ */
  --zic-primary: #60a5fa;                  /*  5.8:1 on raised — icons, borders   */
  --zic-primary-rgb: 96, 165, 250;
  --zic-primary-text: #93c5fd;             /*  8.1:1 on raised — links, labels    */
  --zic-primary-hover: #7fb3fb;
  --zic-primary-active: #93c5fd;
  --zic-primary-fill: #3e6fd4;             /* white on this: 4.7:1                */
  --zic-primary-contrast: #ffffff;
  --zic-accent: #93c5fd;                   /* decorative only                     */

  /* ---------------------------------------------------------------------
   * Status — semantic only. Never style a business state with a raw hex.
   * ------------------------------------------------------------------ */
  --zic-status-success: #34d399;
  --zic-status-success-rgb: 52, 211, 153;
  --zic-status-success-text: #6ee7b7;      /*  9.6:1 on raised                    */
  --zic-status-success-fill: #34d399;
  --zic-status-success-contrast: #0f172a;  /*  9.3:1 on the fill                  */
  --zic-status-success-bg-subtle: #12312a;
  --zic-status-success-border-subtle: #1f4a3e;

  --zic-status-warning: #fbbf24;
  --zic-status-warning-rgb: 251, 191, 36;
  --zic-status-warning-text: #fcd34d;      /* 10.2:1 on raised                    */
  --zic-status-warning-fill: #fbbf24;
  --zic-status-warning-contrast: #0f172a;  /* 10.7:1 on the fill                  */
  --zic-status-warning-bg-subtle: #33281a;
  --zic-status-warning-border-subtle: #5c4718;

  --zic-status-danger: #f87171;
  --zic-status-danger-rgb: 248, 113, 113;
  --zic-status-danger-text: #fca5a5;       /*  7.7:1 on raised                    */
  --zic-status-danger-fill: #f87171;
  --zic-status-danger-contrast: #0f172a;   /*  6.5:1 on the fill                  */
  --zic-status-danger-bg-subtle: #3a1a1c;
  --zic-status-danger-border-subtle: #5c2628;

  --zic-status-info: #60a5fa;
  --zic-status-info-rgb: 96, 165, 250;
  --zic-status-info-text: #93c5fd;         /*  8.1:1 on raised                    */
  --zic-status-info-fill: #60a5fa;
  --zic-status-info-contrast: #0f172a;     /*  7.0:1 on the fill                  */
  --zic-status-info-bg-subtle: #16273d;
  --zic-status-info-border-subtle: #24405e;

  --zic-status-neutral: #94a3b8;
  --zic-status-neutral-rgb: 148, 163, 184;
  --zic-status-neutral-text: #cbd5e1;      /*  9.9:1 on raised                    */
  --zic-status-neutral-fill: #94a3b8;
  --zic-status-neutral-contrast: #0f172a;  /*  7.0:1 on the fill                  */
  --zic-status-neutral-bg-subtle: #263143;
  --zic-status-neutral-border-subtle: #3b4a61;

  /* ---------------------------------------------------------------------
   * Toast close glyph. Every `-fill` above is light in this theme, so the
   * stock near-black ✕ would vanish on a solid toast. Same path as
   * Bootstrap's own, drawn in the fills' AA contrast colour. See
   * variables-light.css for the full note.
   * ------------------------------------------------------------------ */
  --zic-toast-close-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230f172a'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");

  /* ---------------------------------------------------------------------
   * Interactive states — neutral slate, not blue: a blue wash on near-black
   * reads as a colour cast rather than as a hover.
   * ------------------------------------------------------------------ */
  --zic-interactive-hover: rgba(148, 163, 184, 0.1);
  --zic-interactive-active: rgba(148, 163, 184, 0.16);
  /* 0.75 over #1E293B composites to 3.90:1. At 0.5 it was 2.52:1. */
  --zic-interactive-focus-ring: rgba(96, 165, 250, 0.75);

  /* ---------------------------------------------------------------------
   * Typography. See the light palette for why inline code is tinted off
   * `--zic-surface-secondary` rather than sitting on it directly.
   * ------------------------------------------------------------------ */
  --zic-code-bg: color-mix(in srgb, var(--zic-text-primary) 8%, var(--zic-surface-secondary));
  --zic-code-text: #c4b5fd;                /*  9.7:1 on the code chip          */

  --zic-kbd-bg: var(--zic-surface-primary);
  --zic-kbd-text: var(--zic-text-primary);
  --zic-kbd-border: var(--zic-border-strong);

  --zic-highlight-bg: #78350f;
  --zic-highlight-text: #fde68a;           /*  7.3:1 on it                     */

  /* Desaturated rather than darker: on a dark surface, going darker than the
     resting link (#93C5FD) loses contrast instead of gaining it. 7.1:1. */
  --zic-link-visited: #a5b4d8;

  /* Inverted against the dark page, not darkened toward it — see the light
     palette. 11.5:1 of surface separation, text at 13.4:1. */
  --zic-tooltip-bg: #f1f5f9;
  --zic-tooltip-text: #1e293b;

  /* ---------------------------------------------------------------------
   * Shadows — 40-60% black. On dark surfaces these read as depth, not glow.
   * ------------------------------------------------------------------ */
  --zic-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --zic-shadow-md:
    0 4px 6px -1px rgba(0, 0, 0, 0.5),
    0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --zic-shadow-lg:
    0 10px 15px -3px rgba(0, 0, 0, 0.55),
    0 4px 6px -4px rgba(0, 0, 0, 0.45);
  --zic-shadow-xl:
    0 20px 25px -5px rgba(0, 0, 0, 0.6),
    0 8px 10px -6px rgba(0, 0, 0, 0.5);
}