/* ============================================================
   SPORT TELECOMS LTD — Design Tokens
   Single source of truth. Import first, before any other CSS.
   ============================================================ */
:root {
  /* ---- Brand ---- */
  --st-red:        #C60D17;  /* primary accent */
  --st-red-hover:  #A50A12;
  --st-red-active: #820810;
  --st-red-tint:   #FBEAEB;  /* subtle fills / badges */
  --st-carbon:     #0B0C0E;  /* near-black: headings, dark UI */
  --st-ink:        #1A1D22;  /* body text */
  --st-white:      #FFFFFF;

  /* ---- Neutrals ---- */
  --st-secondary:  #4A5159;  /* secondary text */
  --st-muted:      #6B7280;  /* muted text / captions */
  --st-border:     #E2E5E9;
  --st-surface:    #F5F6F8;  /* light section background */
  --st-disabled:   #A9B0BA;

  /* ---- Functional / UI states ---- */
  --st-success:    #1E874B;
  --st-warning:    #C77A00;
  --st-info:       #1F6FEB;
  --st-danger:     #C60D17;  /* = Sport Red */

  /* ---- Typography ---- */
  --st-font-display: 'Saira', system-ui, sans-serif;   /* headings, UI labels, buttons */
  --st-font-body:    'Barlow', system-ui, sans-serif;  /* body copy */
  --st-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Radius ---- */
  --st-radius-sm:   6px;
  --st-radius-md:   10px;
  --st-radius-lg:   16px;
  --st-radius-pill: 999px;

  /* ---- Elevation ---- */
  --st-shadow-sm: 0 1px 2px  rgba(11,12,14,.08);
  --st-shadow-md: 0 6px 20px rgba(11,12,14,.10);
  --st-shadow-lg: 0 18px 48px rgba(11,12,14,.16);

  /* ---- Spacing (4px base) ---- */
  --st-space-1: 4px;   --st-space-2: 8px;   --st-space-3: 12px;
  --st-space-4: 16px;  --st-space-5: 24px;  --st-space-6: 32px;
  --st-space-7: 48px;  --st-space-8: 64px;  --st-space-9: 96px;
}