:root {
  color-scheme: dark;
  --brand-navy: #081020;
  --brand-dark-blue: #111827;
  --brand-slate: #1e293b;
  --brand-white: #ffffff;
  --brand-blue: #007bff;
  --brand-sky: #33c3ff;
  --brand-success: #22c55e;
  --brand-danger: #ff3b30;

  --color-page: var(--brand-navy);
  --color-surface: var(--brand-dark-blue);
  --color-surface-raised: var(--brand-slate);
  --color-text: var(--brand-white);
  --color-text-muted: #a6b4c8;
  --color-text-disabled: #94a3b8;
  --color-border: #334155;
  --color-control-border: #64748b;
  --color-action: var(--brand-blue);
  --color-action-hover: var(--brand-sky);
  --color-action-pressed: #0066d6;
  --color-on-action: var(--brand-navy);
  --color-on-action-pressed: var(--brand-white);
  --color-primary-button: #0066d6;
  --color-primary-button-hover: #005bbf;
  --color-primary-button-pressed: #004fa8;
  --color-on-primary-button: var(--brand-white);
  --color-link: var(--brand-sky);
  --color-focus: var(--brand-sky);
  --color-success: var(--brand-success);
  --color-danger: var(--brand-danger);
  --color-warning: #fbbf24;
  --color-status-surface: var(--brand-navy);
  --color-overlay: rgb(0 0 0 / 72%);
  --color-header-overlay: rgb(17 24 39 / 94%);
  --color-reference-header: rgb(17 24 39 / 96%);
  --color-surface-glass: rgb(17 24 39 / 52%);
  --color-surface-glass-82: rgb(17 24 39 / 82%);
  --color-surface-glass-94: rgb(17 24 39 / 94%);
  --color-surface-glass-18: rgb(255 255 255 / 18%);
  --color-surface-glass-12: rgb(255 255 255 / 12%);
  --color-surface-glass-5: rgb(255 255 255 / 5%);
  --color-text-on-dark-62: rgb(255 255 255 / 62%);
  --color-action-border-soft: rgb(0 123 255 / 22%);
  --color-action-border: rgb(0 123 255 / 38%);
  --color-action-border-28: rgb(0 123 255 / 28%);
  --color-action-border-35: rgb(0 123 255 / 35%);
  --color-action-soft-5: rgb(0 123 255 / 5%);
  --color-action-soft-7: rgb(0 123 255 / 7%);
  --color-action-soft-9: rgb(0 123 255 / 9%);
  --color-action-soft-10: rgb(0 123 255 / 10%);
  --color-action-soft-14: rgb(0 123 255 / 14%);
  --color-action-soft-16: rgb(0 123 255 / 16%);
  --color-danger-border-soft: rgb(255 59 48 / 45%);
  --color-danger-soft-6: rgb(255 59 48 / 6%);
  --color-danger-soft-10: rgb(255 59 48 / 10%);
  --color-warning-border-soft: rgb(251 191 36 / 45%);
  --color-warning-soft-10: rgb(251 191 36 / 10%);
  --color-warning-soft-15: rgb(251 191 36 / 15%);
  --color-success-soft: rgb(34 197 94 / 10%);
  --color-on-warning: var(--brand-navy);
  --color-on-success: var(--brand-navy);
  --color-on-danger: var(--brand-navy);

  --font-family: Manrope, system-ui, sans-serif;
  --weight-200: 200;
  --weight-300: 300;
  --weight-400: 400;
  --weight-500: 500;
  --weight-600: 600;
  --weight-650: 650;
  --weight-700: 700;
  --weight-750: 750;
  --weight-800: 800;
  --radius: 12px;
  --content-width: 1180px;
  --shadow: 0 0 24px rgb(0 123 255 / 14%);
  --shadow-soft: 0 10px 30px rgb(0 123 255 / 7%);
  --shadow-upload: 0 8px 24px rgb(0 123 255 / 7%);
  --shadow-upload-soft: 0 8px 24px rgb(0 123 255 / 5%);
  --shadow-reference: 0 14px 40px rgb(0 123 255 / 6%);
  --shadow-editor: 0 4px 14px rgb(0 123 255 / 16%);
  --shadow-face: 0 0 0 1px rgb(0 0 0 / 24%);
  --shadow-action-focus: 0 0 0 4px rgb(0 123 255 / 16%);
  font-family: var(--font-family);
  font-synthesis: none;
}