:root {

  /* ──────────────── COLOURS ──────────────── */

  --color-brand-red:          #d1262c;
  --color-brand-red-hover:    #b52226;
  --color-brand-red-active:   #a00000;
  --color-brand-red-subtle:   rgba(209, 38, 44, 0.10);

  --color-brand-blue:         #115d8e;
  --color-brand-blue-hover:   #0e4d76;

  --color-accent-blue:        #1688c6;

  --color-accent-gold:        #ffd000;

  --color-text:               #212529;
  --color-text-secondary:     #495057;
  --color-text-muted:         #6c757d;
  --color-text-placeholder:   #999;
  --color-text-light:         #aaa;
  --color-text-on-dark:       #ffffff;
  --color-text-on-brand:      #ffffff;

  --color-surface:            #ffffff;
  --color-surface-alt:        #f8f9fa;
  --color-page-bg:            #ffffff;
  --color-section-bg:         #f0f0f0;

  --color-border:             #dee2e6;
  --color-border-light:       #e5e7eb;
  --color-border-input:       #ced4da;

  --color-success:            #198754;
  --color-warning:            #ffc107;
  --color-danger:             #dc3545;
  --color-info:               #0dcaf0;

  --color-overlay-light:      rgba(255, 255, 255, 0.75);
  --color-overlay-dark:       rgba(0, 0, 0, 0.50);
  --color-overlay-scrim:      rgba(0, 0, 0, 0.15);


  /* ──────────────── BORDER RADIUS ──────────────── */

  --radius-sm:    4px;
  --radius-md:    8px;
  --radius-lg:    12px;
  --radius-pill:  24px;
  --radius-full:  9999px;


  /* ──────────────── BOX SHADOWS ──────────────── */

  --shadow-xs:          0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-card:        0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-card-raised: 0 6px 20px rgba(0, 0, 0, 0.12);
  --shadow-overlay:     0 8px 30px rgba(0, 0, 0, 0.18);
  --shadow-inset:       inset 0 1px 2px rgba(0, 0, 0, 0.075);
  --shadow-focus-ring:  0 0 0 0.25rem rgba(209, 38, 44, 0.35);


  /* ──────────────── SPACING (4 px base) ──────────────── */

  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   24px;
  --space-6:   32px;
  --space-7:   48px;


  /* ──────────────── TYPOGRAPHY ──────────────── */

  --fs-sm:    0.75rem;
  --fs-base:  0.875rem;
  --fs-md:    1rem;
  --fs-lg:    1.125rem;
  --fs-xl:    1.25rem;
  --fs-2xl:   1.5rem;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --leading-tight:  1.25;
  --leading-normal: 1.5;
  --leading-loose:  1.75;


  /* ──────────────── TRANSITIONS ──────────────── */

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;


  /* ──────────────── Z-INDEX SCALE ──────────────── */

  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-popover:   500;
  --z-tooltip:   600;
}