/* VidTote brand tokens. Interface layout belongs to the page workstream. */
:root {
  --vt-canvas: #F7F5EF;
  --vt-surface: #FFFFFF;
  --vt-text: #241C32;
  --vt-secondary: #62566E;
  --vt-action: #51406C;
  --vt-action-text: #FFFFFF;
  --vt-accent: #D7EE6C;
  --vt-accent-text: #241C32;
  --vt-border: #8A7C9B;
  --vt-focus: #6E3FB0;
  --vt-error: #9D2441;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vt-canvas: #17121F;
    --vt-surface: #241C32;
    --vt-text: #F7F5EF;
    --vt-secondary: #D0C7DB;
    --vt-action: #D7EE6C;
    --vt-action-text: #17121F;
    --vt-accent: #D7EE6C;
    --vt-accent-text: #17121F;
    --vt-border: #94869F;
    --vt-focus: #D7EE6C;
    --vt-error: #FF9DB3;
  }
}

.vt-brand-logo {
  display: block;
  inline-size: 10rem;
  block-size: 2rem;
  max-inline-size: 100%;
  object-fit: contain;
}

.vt-brand-mark {
  display: block;
  inline-size: 2rem;
  block-size: 2rem;
  object-fit: contain;
}