:root {
  /* ========= COLORS ========= */

  --ink: #0d0d0d;
  --ink-2: #3d3d3d;
  --ink-3: #6b7280;
  --ink-4: #9ca3af;

  --surface: #ffffff;
  --surface-2: #f9fafb;
  --surface-3: #f3f4f6;

  --rule: #e5e7eb;
  --rule-2: #f3f4f6;

  --accent: #3f88a5;  /* This colour is project theme colour */
  --accent-2: #e0f2fe;
  --accent-3: #f0f9ff;

  --green: #16a34a;
  --green-2: #dcfce7;

  --amber: #d97706;
  --amber-2: #fef3c7;

  --red: #dc2626;
  --red-2: #fee2e2;
  --red-3: #fef2f2;
  --red-border: #fecaca;

  --purple: #7c3aed;
  --purple-2: #ede9fe;

  /* ========= TYPOGRAPHY ========= */

  --font-sans: 'Inter', sans-serif;
  --font-heading: 'Syne', sans-serif;
  --font-mono: 'Fira Code', monospace;

  /* ========= SPACING ========= */

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-control: 8px;
  --radius-pill: 20px;

  /* ========= SHADOWS ========= */

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.18);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.2);

  /* ========= OVERLAYS ========= */

  --overlay-bg: rgba(15, 23, 42, 0.45);

  /* ========= TRANSITIONS ========= */

  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;

  /* ========= SEMANTIC — BUTTONS ========= */

  --btn-primary-bg:        var(--accent);
  --btn-primary-text:      #ffffff;
  --btn-primary-shadow:    var(--shadow-md);

  --btn-secondary-bg:      var(--surface);
  --btn-secondary-text:    var(--ink-2);
  --btn-secondary-border:  var(--rule);
  --btn-secondary-bg-hover: var(--surface-2);
  --btn-secondary-border-hover: #d1d5db;

  --btn-danger-bg:         var(--red);
  --btn-danger-bg-hover:   #b91c1c;
  --btn-danger-text:       #ffffff;

  /* ========= SEMANTIC — TEXT ========= */

  --text-primary:   var(--ink);
  --text-secondary: var(--ink-2);
  --text-muted:     var(--ink-3);
  --text-subtle:    var(--ink-4);
  --text-accent:    var(--accent);
  --text-error:     var(--red);
  --text-success:   var(--green);
  --text-warning:   var(--amber);

  /* ========= SEMANTIC — INPUTS ========= */

  --input-bg:            var(--surface);
  --input-border:        var(--rule);
  --input-border-focus:  var(--accent);
  --input-ring-focus:    var(--accent-3);
  --input-border-error:  var(--red);
  --input-ring-error:    var(--red-2);
  --input-text:          var(--ink);
  --input-placeholder:   var(--ink-4);

  /* ========= FONT SIZES ========= */

  --text-xs:   10px;
  --text-sm:   11px;
  --text-base: 13px;
  --text-md:   14px;
  --text-lg:   16px;
  --text-xl:   18px;

  /* ========= SPACING SCALE ========= */
  /* Usage: padding, margin, gap — reference by pixel value */

  --sp-1:  1px;
  --sp-2:  2px;
  --sp-3:  3px;
  --sp-4:  4px;
  --sp-5:  5px;
  --sp-6:  6px;
  --sp-8:  8px;
  --sp-10: 10px;
  --sp-12: 12px;
  --sp-14: 14px;
  --sp-16: 16px;
  --sp-18: 18px;
  --sp-20: 20px;
  --sp-22: 22px;
  --sp-24: 24px;
  --sp-28: 28px;
}