/* Monetoli Brand Design Tokens
 * Source of truth: new-spending.web/src/theme/brand.ts
 */
:root {
  /* === Primary: Fuchsia === */
  --c-primary:          #C026D3;
  --c-primary-dark:     #A21CAF;
  --c-primary-darker:   #86198F;
  --c-primary-light:    #E879F9;
  --c-primary-surface:  #FDF4FF;
  --c-primary-contrast: #FFFFFF;

  /* === Neutrals: Warm Stone === */
  --c-n900: #1C1917;
  --c-n800: #292524;
  --c-n700: #44403C;
  --c-n600: #57534E;
  --c-n500: #78716C;
  --c-n400: #A8A29E;
  --c-n300: #D6D3D1;
  --c-n200: #E7E5E4;
  --c-n100: #F5F5F4;
  --c-n50:  #FAFAF9;

  /* === Semantic === */
  --c-success: #16A34A;
  --c-error:   #DC2626;
  --c-warning: #EA580C;
  --c-info:    #2563EB;

  /* === Fixed === */
  --c-white: #FFFFFF;
  --c-black: #000000;

  /* === Typography === */
  --font:      'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', 'Roboto Mono', monospace;

  /* === Spacing (4px base grid) === */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-2xl: 48px;
  --sp-3xl: 64px;

  /* === Border Radius === */
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   16px;
  --r-full: 9999px;

  /* === Layout === */
  --max-w:    1200px;
  --header-h: 64px;
}