/**
 * AMARI INDUSTRIES — DESIGN SYSTEM TOKENS & VARIABLES
 * Core Industrial B2B Visual Language
 */

:root {
  /* Brand Color Palette */
  --color-primary: #000000;
  --color-primary-container: #0e1c2f;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #77849c;

  --color-secondary: #386472;
  --color-secondary-container: #bceafa;
  --color-on-secondary: #ffffff;
  --color-on-secondary-container: #1d4d59;

  --color-tertiary: #f5a623;
  --color-tertiary-hover: #d9820b;
  --color-tertiary-fixed: #ffddb4;
  --color-tertiary-fixed-dim: #ffb955;
  --color-on-tertiary-fixed: #291800;

  --color-background: #f9f9ff;
  --color-surface: #f9f9ff;
  --color-surface-bright: #ffffff;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f0f3ff;
  --color-surface-container: #e7eeff;
  --color-surface-container-high: #dee8ff;
  --color-surface-container-highest: #d8e3fb;

  --color-on-surface: #111c2d;
  --color-on-surface-variant: #44474c;
  --color-outline: #75777d;
  --color-outline-variant: #c5c6cd;

  --color-error: #ba1a1a;
  --color-success: #1b873f;
  --color-border-subtle: rgba(197, 198, 205, 0.7);

  /* Typography Families */
  --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* 8px Spacing System */
  --spacing-1: 8px;
  --spacing-2: 16px;
  --spacing-3: 24px;
  --spacing-4: 32px;
  --spacing-5: 40px;
  --spacing-6: 48px;
  --spacing-7: 64px;
  --spacing-8: 80px;
  --spacing-9: 96px;

  /* Layout Boundaries */
  --max-width-content: 1320px;
  --header-height: 72px;
  --topbar-height: 40px;

  /* Border Radii */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Subtle B2B Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(17, 28, 45, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(17, 28, 45, 0.08), 0 2px 4px -1px rgba(17, 28, 45, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(17, 28, 45, 0.1), 0 4px 6px -2px rgba(17, 28, 45, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(17, 28, 45, 0.12), 0 10px 10px -5px rgba(17, 28, 45, 0.04);

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