:root {
  /* Backgrounds - deep dark editorial palette */
  --color-bg-primary:    #0D0F14;   /* Main app background */
  --color-bg-secondary:  #13161C;   /* Secondary background, panels */
  --color-bg-elevated:   #1A1D25;   /* Cards, inputs */
  --color-bg-surface:    #21252F;   /* Tooltips, dropdowns */

  /* Brand accent - electric blue */
  --color-accent:        #2B7FFF;   /* Primary interactive colour */
  --color-accent-hover:  #4D94FF;   /* Hover state */
  --color-accent-muted:  rgba(43, 127, 255, 0.12); /* Subtle accent fill */

  /* Text hierarchy */
  --color-text-primary:  #F0F2F8;   /* Main body text */
  --color-text-secondary:#9AA3B8;   /* Helper / secondary text */
  --color-text-muted:    #555E75;   /* Placeholders, disabled */

  /* Semantic colours */
  --color-success: #2DD4A0;  /* Confirmations, checkmarks */
  --color-warning: #F5A623;  /* Warnings */
  --color-danger:  #FF4D6D;  /* Errors, destructive actions */

  /* Typography */
  --font-display: 'Syne', sans-serif;    /* Headings, word display */
  --font-body:    'DM Sans', sans-serif; /* Body copy, UI labels */

  /* Fluid font scale */
  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 0.9375rem;  /* 15px */
  --text-lg:   1.0625rem;  /* 17px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  2rem;       /* 32px */

  /* Spacing - 4px grid */
  --space-1:  0.25rem;   /* 4px */
  --space-2:  0.5rem;    /* 8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */

  /* Border radius */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   18px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:     0 1px 3px rgba(0,0,0,0.4);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.5);
  --shadow-accent: 0 4px 24px rgba(43,127,255,0.25);

  /* Transitions */
  --transition-fast:   150ms cubic-bezier(0.4,0,0.2,1);
  --transition-normal: 250ms cubic-bezier(0.4,0,0.2,1);
  --transition-slow:   400ms cubic-bezier(0.4,0,0.2,1);

  /* Z-index layers */
  --z-overlay: 100;
  --z-popup:   200;
  --z-modal:   300;
  --z-toast:   400;
}