/* ============================================
   METATECH SOFTWARE — Design Tokens
   Source: BRAND-DESIGN-SYSTEM.md v1.0
   ============================================ */

:root {
  /* --- Primary — Orange #F37E01 --- */
  --primary-50: #FEF5E6;
  --primary-100: #FCE6C0;
  --primary-200: #FAD49A;
  --primary-300: #F7B767;
  --primary-400: #F59B34;
  --primary-500: #F37E01;
  --primary-600: #C96900;
  --primary-700: #9A5000;
  --primary-800: #6B3700;
  --primary-900: #3D1F00;

  /* --- Secondary — Charcoal #363635 --- */
  --secondary-50: #EBEBEB;
  --secondary-100: #CDCDCC;
  --secondary-200: #ABABAA;
  --secondary-300: #8A8A89;
  --secondary-400: #6B6B6A;
  --secondary-500: #4F4F4E;
  --secondary-600: #363635;
  --secondary-700: #272726;
  --secondary-800: #1A1A19;
  --secondary-900: #0D0D0D;

  /* --- Tertiary — Cloud #F4F6F7 --- */
  --tertiary-50: #FAFBFB;
  --tertiary-100: #F4F6F7;
  --tertiary-200: #E8E8E8;
  --tertiary-300: #DCDCDC;
  --tertiary-400: #CCCCCC;
  --tertiary-500: #B8B8B7;
  --tertiary-600: #999998;
  --tertiary-700: #7A7A79;
  --tertiary-800: #5C5C5B;
  --tertiary-900: #3D3D3C;

  /* --- Neutral — Black #000000 --- */
  --neutral-50: #F0F0F0;
  --neutral-100: #D6D6D6;
  --neutral-200: #B3B3B3;
  --neutral-300: #8F8F8F;
  --neutral-400: #6E6E6E;
  --neutral-500: #525252;
  --neutral-600: #3D3D3D;
  --neutral-700: #292929;
  --neutral-800: #141414;
  --neutral-900: #000000;

  /* --- Semantic --- */
  --success: #2E7D32;
  --warning: #F37E01;
  --error: #C62828;
  --info: #1565C0;

  /* --- Typography --- */
  --font-primary: 'DM Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;

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

  /* --- Border Radius --- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 50%;

  /* --- Shadows --- */
  --shadow-none: none;
  --shadow-low: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-medium: 0 4px 12px rgba(0,0,0,0.15), 0 2px 4px rgba(0,0,0,0.08);
  --shadow-high: 0 12px 40px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1);

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;

  /* --- Z-Index --- */
  --z-base: 0;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;
}