:root {
  --color-text-subtle:    #6b6b6b;
  --color-success:        #047857;
  --color-info:           #0369a1;
  --color-warning:        #b45309;
  --color-write:          var(--color-accent);
  --color-write-soft:     var(--color-accent-soft);
  --color-write-on-dark:  #ff527b;
  --color-blocks:         #8b5cf6;
  --color-blocks-soft:    rgba(139, 92, 246, 0.10);
  --color-warning-soft:   rgba(217, 119, 6, 0.06);
  --color-blocks-on-dark: #a78bfa;
  --color-upload:         #0284c7;
  --color-upload-soft:    rgba(2, 132, 199, 0.10);
  --color-upload-on-dark: #38bdf8;
  --color-chat:           #0d9488;
  --color-chat-soft:      rgba(13, 148, 136, 0.10);
  --color-chat-on-dark:   #2dd4bf;
  --color-documents:         #4f46e5;
  --color-documents-soft:    rgba(79, 70, 229, 0.10);
  --color-documents-on-dark: #818cf8;
  --color-links:         #475569;
  --color-links-soft:    rgba(71, 85, 105, 0.10);

  --space-row:       var(--space-3);
  --space-row-group: calc(var(--space-row) + var(--space-card-stack));
  --space-row-tight: var(--space-1);

  --tone:         var(--color-accent);
  --tone-soft:    var(--color-accent-soft);
  --tone-on-dark: var(--color-topbar-text);

  --topbar-h:     clamp(3.5rem, 8vw, 4rem);
  --topbar-stick: 0px;
  --to-top-lift:  0px;
  --drawer-w:     20rem;
  --chat-aside-w: 17.5rem;
}

:root[data-section="chat"] {
  --topbar-stick: var(--topbar-h);
}

@media (max-width: 768px) {
  :root {
    --topbar-stick: var(--topbar-h);
  }
}