html[data-theme="dark"] {
  --bg-nav:           #19181e;
  --bg-base:          #16151A;
  --bg-surface:       #1F1E24;
  --bg-elevated:      #2A2930;
  --bg-hover:         #23222A;
  --bg-muted:         #191820;
  --bg-stripe:        rgba(214, 51, 108, 0.03);

  --border:           #2E2D35;
  --border-strong:    #404049;

  --text-primary:     #ECEAEE;
  --text-secondary:   #9C9AA3;
  --text-tertiary:    #666666;
  --text-body:        #C5C2CC;

  --brand-pure:       #E0004D;

  --primary-color:    #D6336C;
  --primary-hover:    #E55A87;
  --primary-active:   #B82A5C;
  --primary-bg:       #2A1020;
  --primary-soft:     rgba(214, 51, 108, 0.10);
  --primary-border:   rgba(214, 51, 108, 0.32);
  --primary-contrast: #FFFFFF;

  --success:          #34D399; --success-soft: rgba(52,  211, 153, 0.12);
  --warning:          #FBBF24; --warning-soft: rgba(251, 191,  36, 0.12);
  --danger:           #F97316; --danger-soft:  rgba(249, 115,  22, 0.14);
  --info:             #60A5FA; --info-soft:    rgba(96,  165, 250, 0.12);
  --create:           #34D399; --create-bg: rgba(52,  211, 153, 0.10); --create-border: rgba(34,  197,  94, 0.30);
  --read:             #60A5FA; --read-bg:   rgba(96,  165, 250, 0.10); --read-border:   rgba(96,  165, 250, 0.25);
  --update:           #FBBF24; --update-bg: rgba(251, 191,  36, 0.10); --update-border: rgba(245, 158,  11, 0.30);
  --delete:           #F87171; --delete-bg: rgba(239,  68,  68, 0.10); --delete-border: rgba(239,  68,  68, 0.30);
  --active-bg:        rgba(52, 211, 153, 0.10); --active-color:   #34D399;
  --inactive-bg:      rgba(239, 68,  68, 0.10); --inactive-color: #F87171;

  --skel-base:        var(--bg-elevated);
  --skel-surface:     var(--bg-surface);
  --skel-border:      rgba(46, 45, 53, 0.40);
  --skel-shadow:      0 10px 26px rgba(0, 0, 0, 0.15);
  --ocr-bg:           var(--bg-elevated);
  --ocr-border:       var(--border);

  --log-bg:           var(--bg-surface);
  --log-soft:         var(--bg-muted);
  --log-text:         var(--text-primary);
  --log-muted:        var(--text-secondary);
  --log-border:       var(--border);
  --log-hover:        var(--bg-elevated);
  --log-accent:       var(--primary-color);
  --anim-color:       var(--primary-color);

  --shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-md:        0 4px 12px rgba(0, 0, 0, 0.40);
  --shadow-lg:        0 12px 32px rgba(0, 0, 0, 0.50);
  --shadow-modal:     0 24px 60px rgba(0, 0, 0, 0.55);
  --ring:             0 0 0 3px rgba(214, 51, 108, 0.35);
  --bg-white:         var(--bg-surface);
  --surface-color:    var(--bg-surface);
  --background-color: var(--bg-base);
  --border-color:     var(--border);
  --border-light:     var(--bg-elevated);
  --text:             var(--text-primary);
  --fg:               var(--text-primary);
  --fg-muted:         var(--text-secondary);
  --accent:           var(--primary-color);
  --accent-light:     rgba(214, 51, 108, 0.10);
  --accent-dark:      var(--primary-active);

  --primary-light-bg: rgba(214, 51, 108, 0.10);
  --primary-shadow:   rgba(214, 51, 108, 0.25);
  --text-main:        var(--text-primary);
  --border-medium:    var(--border);
}