/* app-theme.css — references tokens from colors.css */
:root {
  /* Global app background */
  --app-bg-start: var(--color-bg,      #F8FAFC);
  --app-bg-mid:   #EEF2FF;
  --app-bg-end:   #E0E7FF;

  /* Floating panels (/routes and /driven) */
  --floating-panel-bg:       rgba(255, 255, 255, 0.96);
  --floating-panel-border:   var(--color-border,       #E2E8F0);
  --floating-panel-shadow:   0 10px 24px rgba(79, 70, 229, 0.10);
  --floating-title:          var(--color-text,         #0F172A);
  --floating-text:           var(--color-text,         #0F172A);
  --floating-muted:          var(--color-muted,        #64748B);
  --floating-surface:        var(--color-bg,           #F8FAFC);
  --floating-surface-2:      var(--color-surface,      #FFFFFF);
  --floating-border:         var(--color-border,       #E2E8F0);
  --floating-border-soft:    #F1F5F9;

  /* Action colours */
  --floating-accent:         var(--color-primary,       #4F46E5);
  --floating-accent-strong:  var(--color-primary-hover, #4338CA);
  --floating-danger:         var(--color-error,         #DC2626);
  --floating-active-bg:      var(--color-primary-light, #EEF2FF);
  --floating-active-border:  var(--color-primary,       #4F46E5);
  --floating-pill-bg:        var(--color-surface,       #FFFFFF);
  --floating-pill-border:    var(--color-border,        #E2E8F0);
}

/* Route geometry colour — unchanged */
:root {
  --route-color:  #ff7a3d;
  --arrow-fill:   #fff4ec;
  --arrow-stroke: #5c2d1e;
  --panel-bg:     var(--floating-panel-bg);
  --shadow:       var(--floating-panel-shadow);
  --accent:       var(--floating-accent);
  --accent-strong:var(--floating-accent-strong);
  --danger:       var(--floating-danger);
  --ink:          var(--floating-text);
  --muted:        var(--floating-muted);
  --surface:      var(--floating-surface);
  --surface-2:    var(--floating-surface-2);
  --border:       color-mix(in srgb, var(--floating-border) 70%, transparent);
}

/* App background */
.app {
  background: radial-gradient(1200px 900px at 10% 0%, var(--app-bg-start), transparent 60%),
              radial-gradient(900px 700px at 100% 0%, var(--app-bg-mid), transparent 50%),
              linear-gradient(120deg, var(--app-bg-start), var(--app-bg-mid) 60%, var(--app-bg-end));
}

.panel {
  background: var(--floating-panel-bg) !important;
  border: 1px solid var(--floating-panel-border) !important;
  box-shadow: var(--floating-panel-shadow) !important;
}

.panel h2,
.panel .label,
.panel .muted,
.panel .sub,
.panel .mono,
.panel .info-block,
.panel .info-card {
  color: var(--floating-text) !important;
}

.panel .label,
.panel .muted,
.panel .sub {
  color: var(--floating-muted) !important;
}

.panel input:not(.toggle-switch),
.panel .auth-input,
.panel select {
  border: 1px solid var(--floating-border) !important;
  background: var(--floating-surface-2) !important;
  color: var(--floating-text) !important;
}

/* Switch — pill colours */
.panel .toggle-switch {
  background: #CBD5E1 !important;
}

.panel .toggle-switch:checked {
  background: var(--color-primary, #4F46E5) !important;
}

.panel .toggle-switch::after {
  background: #ffffff !important;
}

.panel .route-item {
  background: var(--floating-surface-2) !important;
  border: 1px solid var(--floating-border) !important;
}

.panel .route-item.active {
  background: var(--floating-active-bg) !important;
  border-color: var(--floating-active-border) !important;
  box-shadow: none !important;
}

.panel .btn {
  background: var(--floating-accent) !important;
  box-shadow: 0 6px 14px rgba(79, 70, 229, 0.22) !important;
}

.panel .ghost-btn,
.panel .mini-btn,
.panel .plus-btn {
  border: 1px solid var(--floating-pill-border) !important;
  background: var(--floating-pill-bg) !important;
  color: var(--floating-text) !important;
}

.panel .mini-btn,
.panel .badge,
.panel .badge-btn {
  background: var(--floating-danger) !important;
  color: #fff !important;
  border-color: var(--floating-danger) !important;
}