:root {
  --blue-50:  #eef6fe;
  --blue-100: #d8ebfd;
  --blue-200: #b7dbfc;
  --blue-300: #8ac5f9;
  --blue-400: #55a6f5;
  --blue-500: #0f7fe9;
  --blue-600: #0a63c4;
  --blue-700: #0c4f9e;
  --blue-800: #0f4181;
  --blue-900: #12386b;
  --blue-950: #0c2445;
  --neutral-0:   #ffffff;
  --neutral-50:  #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-150: #e9eef4;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;
  --neutral-950: #080f1f;
  --green-50:  #ecfdf3;
  --green-100: #d1fadf;
  --green-500: #12a869;
  --green-600: #0f8a56;
  --green-700: #0c6b43;
  --amber-50:  #fef7ec;
  --amber-100: #fbecc9;
  --amber-500: #d98218;
  --amber-600: #b56a10;
  --amber-700: #8f530c;
  --red-50:  #fef2f2;
  --red-100: #fde3e3;
  --red-500: #e5484d;
  --red-600: #cc2f34;
  --red-700: #a71f24;
  --code-bg:      #0c1424;
  --code-bg-alt:  #121c30;
  --code-border:  #1f2b45;
  --code-fg:      #dbe4f3;
  --code-muted:   #7d8ca8;
  --syntax-key:      #7cc0ff;
  --syntax-string:   #7ee0a8;
  --syntax-number:   #f7bd6b;
  --syntax-keyword:  #c9a3ff;
  --syntax-comment:  #64748b;
  --syntax-punc:     #7d8ca8;
  --brand:            var(--blue-500);
  --brand-hover:      var(--blue-600);
  --brand-active:     var(--blue-700);
  --brand-subtle:     var(--blue-50);
  --brand-subtle-fg:  var(--blue-700);
  --brand-ring:       color-mix(in srgb, var(--blue-500) 32%, transparent);
  --bg-body:          var(--neutral-50);
  --bg-canvas:        var(--neutral-100);
  --surface-card:     var(--neutral-0);
  --surface-raised:   var(--neutral-0);
  --surface-sunken:   var(--neutral-50);
  --surface-hover:    var(--neutral-100);
  --surface-inverse:  var(--neutral-900);
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--neutral-600);
  --text-tertiary:    var(--neutral-500);
  --text-muted:       var(--neutral-400);
  --text-on-brand:    var(--neutral-0);
  --text-inverse:     var(--neutral-0);
  --text-link:        var(--blue-600);
  --border-subtle:    var(--neutral-150);
  --border-default:   var(--neutral-200);
  --border-strong:    var(--neutral-300);
  --border-focus:     var(--blue-500);
  --success:          var(--green-500);
  --success-fg:       var(--green-700);
  --success-subtle:   var(--green-50);
  --warning:          var(--amber-500);
  --warning-fg:       var(--amber-700);
  --warning-subtle:   var(--amber-50);
  --danger:           var(--red-500);
  --danger-fg:        var(--red-700);
  --danger-subtle:    var(--red-50);
  --info:             var(--blue-500);
  --info-fg:          var(--blue-700);
  --info-subtle:      var(--blue-50);
  --verb-get:    var(--blue-600);
  --verb-post:   var(--green-600);
  --verb-put:    var(--amber-600);
  --verb-patch:  #8b5cf6;
  --verb-delete: var(--red-600);
}
.dark {
  --brand:            var(--blue-400);
  --brand-hover:      var(--blue-300);
  --brand-active:     var(--blue-200);
  --brand-subtle:     color-mix(in srgb, var(--blue-500) 22%, var(--neutral-950));
  --brand-subtle-fg:  var(--blue-200);
  --brand-ring:       color-mix(in srgb, var(--blue-400) 42%, transparent);
  --bg-body:          var(--neutral-950);
  --bg-canvas:        #060b16;
  --surface-card:     var(--neutral-900);
  --surface-raised:   var(--neutral-800);
  --surface-sunken:   #0b1424;
  --surface-hover:    var(--neutral-800);
  --surface-inverse:  var(--neutral-100);
  --text-primary:     var(--neutral-100);
  --text-secondary:   var(--neutral-300);
  --text-tertiary:    var(--neutral-400);
  --text-muted:       var(--neutral-500);
  --text-on-brand:    var(--neutral-950);
  --text-inverse:     var(--neutral-900);
  --text-link:        var(--blue-300);
  --border-subtle:    color-mix(in srgb, var(--neutral-700) 45%, transparent);
  --border-default:   var(--neutral-800);
  --border-strong:    var(--neutral-700);
  --border-focus:     var(--blue-400);
  --success:          var(--green-500);
  --success-fg:       #5bd6a0;
  --success-subtle:   color-mix(in srgb, var(--green-500) 20%, var(--neutral-950));
  --warning:          var(--amber-500);
  --warning-fg:       #f0bd6f;
  --warning-subtle:   color-mix(in srgb, var(--amber-500) 20%, var(--neutral-950));
  --danger:           var(--red-500);
  --danger-fg:        #f28b8e;
  --danger-subtle:    color-mix(in srgb, var(--red-500) 20%, var(--neutral-950));
  --info:             var(--blue-400);
  --info-fg:          var(--blue-200);
  --info-subtle:      color-mix(in srgb, var(--blue-500) 20%, var(--neutral-950));
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.40);
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.50);
  --shadow-lg:  0 4px 8px rgba(0, 0, 0, 0.45), 0 12px 28px rgba(0, 0, 0, 0.55);
  --shadow-xl:  0 12px 24px rgba(0, 0, 0, 0.50), 0 24px 56px rgba(0, 0, 0, 0.60);
}