/* ─── CORE NEUTRAL TOKENS ─── */
:root {
  /* Backgrounds */
  --bg-primary:     #ffffff;
  --bg-secondary:   #f7f6f3;
  --bg-tertiary:    #efeeea;

  /* Borders */
  --border:         #e9e9e7;

  /* Text */
  --text-primary:   #1a1a1a;
  --text-secondary: #6b6b6b;
  --text-muted:     #9b9b9b;

  /* Accent */
  --accent:         #37352f;

  /* ─── LEGACY ALIASES (used by src/App.jsx — do not remove) ─── */
  --color-background-primary:   var(--bg-primary);
  --color-background-secondary: var(--bg-secondary);
  --color-border-primary:       var(--border);
  --color-border-secondary:     var(--border);
  --color-border-tertiary:      var(--bg-tertiary);
  --color-text-primary:         var(--text-primary);
  --color-text-secondary:       var(--text-secondary);
  --color-text-tertiary:        var(--text-muted);
  --color-accent:               var(--accent);

  /* Status colours (unchanged — used by PO Converter) */
  --color-background-success: #f0fdf4;
  --color-background-danger:  #fef2f2;
  --color-background-warning: #fffbeb;
  --color-background-info:    #eff6ff;
  --color-border-success:     #86efac;
  --color-border-info:        #93c5fd;
  --color-text-success:       #166534;
  --color-text-danger:        #991b1b;
  --color-text-warning:       #92400e;

  /* ─── TYPOGRAPHY ─── */
  --font-sans:     'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif;
  --text-xs:       12px;
  --text-sm:       13px;
  --text-base:     14px;
  --text-md:       15px;
  --text-lg:       18px;
  --text-xl:       22px;
  --text-2xl:      28px;
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;

  /* ─── SPACING (4px base grid) ─── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* ─── RADIUS ─── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;

  /* ─── SHADOWS ─── */
  --shadow-xs: 0 1px 3px rgba(0,0,0,.05);
  --shadow-sm: 0 2px 6px rgba(0,0,0,.08);
  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
}

/* ─── DARK MODE ─── */
html.dark {
  --bg-primary:     #191919;
  --bg-secondary:   #202020;
  --bg-tertiary:    #2f2f2f;
  --border:         #373737;
  --text-primary:   #e6e6e3;
  --text-secondary: #9b9b9b;
  --text-muted:     #6b6b6b;
  --accent:         #e6e6e3;

  /* Status colours dark overrides */
  --color-background-success: #052e16;
  --color-background-danger:  #450a0a;
  --color-background-warning: #431407;
  --color-background-info:    #0c1a3a;
  --color-border-success:     #166534;
  --color-border-info:        #1e40af;
  --color-text-success:       #86efac;
  --color-text-danger:        #fca5a5;
  --color-text-warning:       #fcd34d;
}