:root {
  /* ── Brand ─────────────────────────────────────── */
  --color-brand:               #FF3C00;
  --color-brand-dark:          #681c05;
  --color-brand-hover:         #6c757d;

  /* ── Text ──────────────────────────────────────── */
  --color-text:                #212529;
  --color-text-strong:         #2c2c2c;
  --color-text-muted:          #6c757d;
  --color-text-inverse:        #ffffff;
  --color-nav-link:            inherit;

  /* ── Links ─────────────────────────────────────── */
  --color-link:                #FF3C00;
  --color-link-blue:           #007bff;
  --color-link-dark:           #FF3C00;

  /* ── Page / surface backgrounds ────────────────── */
  --color-bg:                  #ffffff;
  --color-bg-surface:          #ffffff;
  --color-bg-section:          #ffffff;
  --color-bg-input:            #ffffff;
  --color-bg-input-focus:      #ffffff;
  --color-bg-hover:            transparent;
  --color-bg-active:           transparent;
  --color-bg-muted:            #f8f9fa;
  --color-bg-subtle:           #e9ecef;
  --color-bg-scrollbar:        #F5F5F5;
  --color-bg-btn-light-hover:  #e2e6ea;

  /* ── Borders ────────────────────────────────────── */
  --color-border:              #dee2e6;
  --color-border-subtle:       #e9ecef;
  --color-border-focus:        #dee2e6;
  --color-border-focus-2:      #dee2e6;

  /* ── Bootstrap grey scale ───────────────────────── */
  --color-grey-400:            #ced4da;
  --color-grey-500:            #adb5bd;
  --color-grey-700:            #495057;
  --color-grey-800:            #343a40;

  /* ── Bootstrap status colours ───────────────────── */
  --color-success:             #28a745;
  --color-success-dark:        #1e7e34;
  --color-success-bg:          #d4edda;
  --color-danger:              #dc3545;
  --color-danger-dark:         #c82333;
  --color-danger-bg:           #f8d7da;
  --color-warning:             #ffc107;
  --color-warning-dark:        #e0a800;
  --color-warning-bg:          #fff3cd;
  --color-warning-text:        #856404;
  --color-orange:              #fd7e14;

  /* ── Semantic ───────────────────────────────────── */
  --color-info:                #17a2b8;
  --color-info-dark:           #117a8b;
  --color-highlight:           #ffff00;
  --color-scrollbar-thumb:     #FF9900;

  /* ── Alert backgrounds (light mode) ────────────── */
  --color-alert-info-bg:       #d1ecf1;
  --color-alert-success-bg:    #d4edda;
  --color-alert-warning-bg:    #fff3cd;
  --color-alert-danger-bg:     #f8d7da;

  /* ── Dark mode ticket chrome greys ─────────────── */
  --color-chrome-100:          #f4f6f9;
  --color-chrome-200:          #e0e0e0;
  --color-chrome-500:          #56606a;
  --color-chrome-600:          #4b545c;
  --color-chrome-700:          #3f474e;
  --color-chrome-800:          #3a4047;
  --color-chrome-900:          #343a40;
  --color-chrome-950:          #2f343a;

  /* ── Spacing ────────────────────────────────────── */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;

  /* ── Radius ─────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.75rem;
}