/* theme-colors.css — references tokens from colors.css */
:root {
  --route-color:  #ff7a3d;
  --arrow-fill:   #fff4ec;
  --arrow-stroke: #5c2d1e;
  --panel-bg:     rgba(255, 255, 255, 0.92);
  --popup-bg:     #fff4ec;
  --shadow:       0 24px 60px rgba(20, 12, 8, 0.18);
  --accent:       var(--color-primary,  #4F46E5);
  --accent-strong:var(--color-primary-hover, #4338CA);
  --danger:       var(--color-error,    #DC2626);
  --ink:          var(--color-text,     #0F172A);
  --muted:        var(--color-muted,    #64748B);
  --surface:      var(--color-bg,       #F8FAFC);
  --surface-2:    var(--color-surface,  #FFFFFF);
  --border:       var(--color-border,   #E2E8F0);

  --driven-toggle-row-bg:       var(--color-primary-light, #EEF2FF);
  --driven-toggle-title:        var(--color-text,  #0F172A);
  --driven-toggle-hint:         var(--color-muted, #64748B);
  --driven-toggle-switch-off:   #CBD5E1;
  --driven-toggle-switch-on:    var(--color-primary, #4F46E5);
  --driven-toggle-switch-knob:  #ffffff;
}

.app.dark {
  --route-color:  #c87448;
  --arrow-fill:   #2b221d;
  --arrow-stroke: #c87448;
  --panel-bg:     rgba(24, 18, 16, 0.92);
  --popup-bg:     #241b16;
  --shadow:       0 24px 60px rgba(0, 0, 0, 0.4);
  --accent:       #a5b4fc;
  --accent-strong:#818cf8;
  --danger:       #f87171;
  --ink:          #f8ede4;
  --muted:        #c8b7ab;
  --surface:      #1e1b4b;
  --surface-2:    #2b2870;
  --border:       rgba(255, 255, 255, 0.12);

  --driven-toggle-row-bg:       rgba(255, 255, 255, 0.08);
  --driven-toggle-title:        #f8ede4;
  --driven-toggle-hint:         #d8c5b7;
  --driven-toggle-switch-off:   #5f6a7b;
  --driven-toggle-switch-on:    #a5b4fc;
  --driven-toggle-switch-knob:  #f8ede4;
}