/* ================================================
   theme-dark.css — Dark Mode Token Override
   ================================================ */

body.dark {
  --color-bg:            var(--zugo-dark-background);
  --color-surface:       var(--zugo-dark-surface);
  --color-surface-2:     var(--zugo-dark-surface-container-low);
  --color-surface-3:     var(--zugo-dark-surface-container);
  --color-surface-4:     var(--zugo-dark-surface-container-high);
  --color-overlay:       rgba(0, 0, 0, 0.5);

  --color-text:          var(--zugo-dark-on-background);
  --color-text-body:     var(--zugo-dark-on-surface);
  --color-text-muted:    var(--zugo-dark-on-surface-variant);
  --color-text-subtle:   var(--zugo-dark-on-surface-subtle);
  --color-text-disabled: rgba(226, 226, 230, 0.38);
  --color-text-on-accent:var(--zugo-dark-on-primary);

  --color-fg:            var(--color-text);
  --color-fg-secondary:  var(--color-text-body);
  --color-muted:         var(--color-text-muted);
  --color-bg-secondary:  var(--color-surface-2);
  --color-bg-tertiary:   var(--color-surface-3);

  --field-label-color:   var(--color-text-muted);
  --field-value-color:   var(--color-text);

  --color-success: var(--zugo-dark-success);
  --color-warning: var(--zugo-dark-warning);
  --color-danger:  var(--zugo-dark-error);
  --color-info:    var(--zugo-dark-info);

  --color-on-success: var(--zugo-dark-on-success);
  --color-on-warning: var(--zugo-dark-on-warning);
  --color-on-danger:  var(--zugo-dark-on-error);
  --color-on-info:    var(--zugo-dark-on-info);

  --color-success-soft:  var(--zugo-dark-success-container);
  --color-warning-soft:  var(--zugo-dark-warning-container);
  --color-danger-soft:   var(--zugo-dark-error-container);
  --color-info-soft:     var(--zugo-dark-info-container);

  --color-success-fg: var(--zugo-dark-on-success-container);
  --color-warning-fg: var(--zugo-dark-on-warning-container);
  --color-danger-fg:  var(--zugo-dark-on-error-container);
  --color-info-fg:    var(--zugo-dark-on-info-container);
  --danger-strong: var(--zugo-dark-error);

  --color-accent-light:  var(--zugo-dark-surface-container-low);
  --color-surface-hover: var(--zugo-dark-surface-container-high);
  --calendar-icon-filter: invert(1);
  --select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24' fill='%23c4c6cf'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E");

  --color-border:        var(--zugo-dark-outline-variant);
  --color-border-strong: var(--zugo-dark-outline);
  --color-border-subtle: var(--zugo-dark-outline-variant);
  --color-focus-ring:    var(--zugo-dark-primary);

  --color-accent:        var(--zugo-dark-primary);
  --color-accent-hover:  rgba(164, 200, 255, 0.9);
  --color-accent-active: rgba(164, 200, 255, 0.8);
  --color-accent-solid:  var(--zugo-dark-primary);
  --color-accent-soft:   var(--zugo-dark-primary-container);
  --color-accent-fg:     var(--zugo-dark-on-primary);
  --color-link:          var(--zugo-dark-primary);

  /* Zugo Semantic Colors */
  --color-primary:       var(--zugo-dark-primary);
  --color-on-primary:    var(--zugo-dark-on-primary);
  --color-primary-container: var(--zugo-dark-primary-container);
  --color-on-primary-container: var(--zugo-dark-on-primary-container);

  --color-secondary:     var(--zugo-dark-secondary);
  --color-on-secondary:  var(--zugo-dark-on-secondary);
  --color-secondary-container: var(--zugo-dark-secondary-container);
  --color-on-secondary-container: var(--zugo-dark-on-secondary-container);

  --color-tertiary:      var(--zugo-dark-tertiary);
  --color-on-tertiary:   var(--zugo-dark-on-tertiary);
  --color-tertiary-container: var(--zugo-dark-tertiary-container);
  --color-on-tertiary-container: var(--zugo-dark-on-tertiary-container);

  /* Inverse Zugo Roles */
  --color-inverse-surface:      var(--zugo-dark-inverse-surface);
  --color-inverse-on-surface:   var(--zugo-dark-inverse-on-surface);
  --color-inverse-primary:      var(--zugo-dark-inverse-primary);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 6px 16px rgba(0,0,0,0.45);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.55);
  --shadow-xl: 0 28px 64px rgba(0,0,0,0.65);

  --neutral-800: #2C3036;
}

body.dark .sidebar__logo img,
body.dark .logo-invert {
  filter: brightness(0) invert(1);
}