@scope (.native-shell) {
/*
 * sidebar-theme.css — Sidebar theme variants.
 *
 * Owned module: public/assets/css/core/sidebar/
 *
 * Defines the light-theme override of the sidebar's local --c-* variables.
 * The dark-mode default is declared in sidebar-base.css; this file only
 * paints the light variant.
 *
 * The dual selector (`.sb.theme-light, :scope[data-app-theme="light"] .sb`)
 * is intentional — the first matches the runtime JS class swap, the
 * second matches the inline boot-script attribute that base.php sets
 * synchronously before any paint. Both targets are needed: the attribute
 * stops the first-paint dark flash, and the class is still toggled at
 * runtime by the Dark mode switch.
 *
 */

/* Dual selector — `.sb.theme-light` matches the runtime JS class swap;
 * `:scope[data-app-theme="light"] .sb` matches the inline boot-script
 * attribute that base.php sets synchronously before any paint. Both
 * targets are needed: the attribute stops the first-paint dark flash,
 * and the class is still toggled at runtime by the Dark mode switch. */
.sb.theme-light,
:scope[data-app-theme="light"] .sb {
  /* Sidebar surface hierarchy — light theme bg comes from
   * --ds-color-bg-chrome (#ffffff). */
  --c-bg: var(--ds-color-bg-chrome, #ffffff);
  --c-hover: var(--ds-color-bg-subtle, #f2f2f7);
  --c-active: var(--ds-color-bg-muted, #ebebee);
  --c-text: var(--ds-color-text, #1d1d1f);
  --c-text-medium: var(--ds-color-text-secondary, #62656f);
  /* AA-legible greys on the white chrome. The --ds tertiary/quaternary/border
   * tokens resolve to ~3.5 / ~2.0 / ~1.4:1 — too faint for sidebar text (the
   * dim token was literally the BORDER colour, so section labels were near
   * invisible). Pinned to explicit values that clear ~4.5:1 on #fff. */
  --c-text-muted: #62656f;   /* ~4.9:1 (idle nav / sub-items / flyout items) */
  --c-text-soft: #6f6f74;    /* ~4.7:1 (account email + caret) */
  --c-text-dim: #717177;     /* ~4.5:1 (section labels / footer) */
  --c-divider: transparent;
  --c-border-soft: transparent;
  --c-rail: var(--ds-color-bg-hover, rgba(15, 19, 32, 0.08));
  --c-rail-active: var(--ds-color-interactive, var(--app-theme-accent-hover,#006de9));
  --c-rail-glow: var(--ds-color-focus-ring, var(--app-theme-a-3200,rgba(0, 109, 233, 0.32)));
  --c-shadow: var(--ds-shell-panel-shadow,
    0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04));
  --c-popup-bg: var(--ds-color-bg-canvas, #ffffff);
  --c-popup-border: rgba(0, 0, 0, 0.04);
  --c-popup-hover: var(--ds-color-bg-subtle, #f2f2f7);
  --c-popup-button: var(--ds-color-bg-subtle, #f2f2f7);
  --c-popup-button-border: transparent;
  --c-popup-shadow: 0 18px 44px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --c-up-popup-shadow: 0 20px 50px rgba(0, 0, 0, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.05);
  --c-up-divider: rgba(0, 0, 0, 0.06);
  --c-collapse-btn-bg: var(--ds-color-bg-canvas, #ffffff);
  --c-collapse-btn-border: rgba(0, 0, 0, 0.08);
  --c-collapse-btn-text: var(--ds-color-text-tertiary, #8a8d99);
  --c-collapse-btn-hover-bg: var(--ds-color-bg-subtle, #f2f2f7);
  --c-foot-hover: var(--ds-color-bg-subtle, #f9f9fa);
  --c-tooltip-bg-from: #2a2e36;
  --c-tooltip-bg-to: #18181b;
  --c-tooltip-text: #ffffff;
  --c-tooltip-border: rgba(255, 255, 255, 0.06);
  --c-tooltip-shadow: 0 12px 28px -8px rgba(0,0,0,0.25), 0 4px 10px -2px rgba(0,0,0,0.15);
  --logo-filter: none;
}

}