/* Shared with SixLine's theme/colors.js. Color communicates a role. */
:root {
  color-scheme: dark;
  --bg: #09090B;
  --surface: #16161A;
  --surface-2: #1E1E23;
  --surface-raised: #1B1C22;
  --blue-fill: #1F66C4;
  --surface-3: #292930;
  --border: #35353C;
  --border-strong: #45454E;
  --text: #F0F2F5;
  --text-secondary: #A8ADB8;
  --text-dim: #8A8F9A;
  --blue: #2B7FE8;
  --blue-text: #58A0F2;
  --blue-tint: rgba(43,127,232,0.14);
  --blue-border: rgba(43,127,232,0.35);
  --light-blue: #70B5F5;
  --platinum: #C8CDD4;
  --platinum-tint: rgba(200,205,212,0.08);
  --platinum-border: rgba(200,205,212,0.26);
  --green: #3DBE7F;
  --amber: #EFB13E;
  --red: #EC6B6B;
  --assist: #8B5CF6;
  --assist-text: #A685F0;
  --assist-tint: rgba(139,92,246,0.10);
  --assist-border: rgba(139,92,246,0.26);
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--blue-text);
  outline-offset: 4px;
}

/* Official Six Lines artwork; keep the metallic mark independent of action blue. */
.brand-symbol, .brand-wordmark { flex-shrink: 0; object-fit: contain; }
.brand-wordmark { max-width: 100%; }