/* North West Data Products Ltd — Design Tokens
   Single-file import for use in website/app CSS.
   Font: IBM Plex Sans (load separately from Google Fonts or self-host)
   @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap');
*/

:root {
  /* --- Brand --- */
  --color-brand:       #0f4c3a;
  --color-brand-tint:  oklch(95% 0.025 160);
  --color-brand-light: oklch(88% 0.055 160);

  /* --- Text --- */
  --color-text-primary:     #1a1a18;
  --color-text-secondary:   #555552;
  --color-text-muted:       #999994;
  --color-text-placeholder: #b8b5b0;

  /* --- Surfaces --- */
  --color-bg-ground:  #f0eeea;
  --color-bg-surface: #ffffff;
  --color-bg-raised:  #faf9f7;

  /* --- Border --- */
  --color-border:        #e2dfdb;
  --color-border-subtle: rgba(26, 26, 24, 0.07);

  /* --- Always --- */
  --color-white: #ffffff;
  --color-black: #1a1a18;

  /* --- Typefaces --- */
  --font-sans: 'IBM Plex Sans', Helvetica, Arial, sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* --- Type scale --- */
  --text-2xs:  10px;
  --text-xs:   11.5px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  40px;
  --text-4xl:  54px;

  /* --- Weight --- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* --- Letter spacing --- */
  --tracking-tight:   -0.02em;
  --tracking-snug:    -0.01em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.18em;

  /* --- Line height --- */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.35;
  --leading-normal:  1.55;
  --leading-relaxed: 1.75;

  /* --- Spacing (4px base) --- */
  --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;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* --- Border radius --- */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-lg:   12px;
  --radius-full: 9999px;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg: 0 12px 32px rgba(0,0,0,0.10), 0 4px 8px rgba(0,0,0,0.04);
}