/* ==========================================================================
   ACCELFLOWSYSTEMS DESIGN SYSTEM - VARIABLES
   ========================================================================== */

:root {
  /* Color Palette - Spec Defined */
  --ink-950: #0B0D10;
  --ink-900: #11151A;
  --ink-800: #1A2027;
  --ink-700: #29313A;

  --slate-600: #4B5561;
  --slate-500: #66717D;
  --slate-400: #8B96A1;
  --slate-300: #B9C1C9;
  --slate-200: #DDE2E7;
  --slate-100: #EEF1F3;

  --paper: #FAFBFC;
  --white: #FFFFFF;

  /* Accent - Blue (Use Sparingly) */
  --accent: #315CFF;
  --accent-dark: #2447D8;
  --accent-soft: #EAF0FF;
  --accent-rgb: 49, 92, 255;

  /* Semantic Status Colors */
  --success: #18865B;
  --success-soft: #E9F7F0;

  --warning: #A66A00;
  --warning-soft: #FFF5DF;

  --danger: #C53A3A;
  --danger-soft: #FDECEC;

  /* Node Type Colors */
  --node-org: #11151A;
  --node-vendor: #2447D8;
  --node-service: #0284C7;
  --node-system: #4F46E5;
  --node-process: #059669;
  --node-data: #D97706;
  --node-contract: #7C3AED;
  --node-document: #6B7280;

  /* Typography */
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;

  /* Font Scales */
  --text-display: clamp(2.125rem, 4vw + 1rem, 3.75rem); /* 34px - 60px */
  --text-h1: clamp(2rem, 3vw + 0.75rem, 3.25rem);      /* 32px - 52px */
  --text-h2: clamp(1.625rem, 2.5vw + 0.5rem, 2.5rem);  /* 26px - 40px */
  --text-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.625rem); /* 20px - 26px */
  --text-h4: 1.1875rem;                                /* 19px */
  --text-body-lg: 1.125rem;                            /* 18px */
  --text-body: 0.9375rem;                              /* 15px */
  --text-sm: 0.8125rem;                                /* 13px */
  --text-xs: 0.75rem;                                  /* 12px */

  /* Line Heights */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Spacing Scale (8px system) */
  --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;
  --space-30: 120px;
  --space-40: 160px;

  /* Layout Containers */
  --container-max: 1240px;
  --container-wide: 1400px;
  --container-narrow: 840px;

  /* Borders */
  --border-light: 1px solid rgba(17, 21, 26, 0.08);
  --border-mid: 1px solid rgba(17, 21, 26, 0.14);
  --border-dark: 1px solid rgba(255, 255, 255, 0.10);
  --border-focus: 2px solid var(--accent);

  /* Radius */
  --radius-sm: 6px;
  --radius-button: 8px;
  --radius-card: 12px;
  --radius-panel: 16px;
  --radius-surface: 18px;
  --radius-pill: 9999px;

  /* Subtle Shadows */
  --shadow-subtle: 0 1px 2px rgba(11, 13, 16, 0.04);
  --shadow-card: 0 2px 6px -1px rgba(11, 13, 16, 0.05), 0 1px 3px rgba(11, 13, 16, 0.03);
  --shadow-panel: 0 8px 24px -4px rgba(11, 13, 16, 0.08);
  --shadow-drawer: -4px 0 24px rgba(11, 13, 16, 0.12);
  --shadow-modal: 0 20px 48px -8px rgba(11, 13, 16, 0.22);

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal: 250ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow: 350ms cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-indexes */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}