/* ==========================================================================
   Design Tokens - Awsan Al-Eryani Portfolio
   Extracted from Newportfolio.json
   ========================================================================== */

:root {
  /* Brand Colors */
  --brand-primary: #2b4093;
  --brand-bg: #fdfdfd;
  --brand-dark-blue: #071943;
  --brand-mid-blue: #132559;
  --brand-light-purple: #eff4ff;
  --brand-darker-purple: #dae0ee;

  /* Neutral / Grey Scale */
  --color-white: #ffffff;
  --color-grey-50: #f9f9f9;
  --color-grey-100: #eeeeee;
  --color-grey-200: #e6e6e6;
  --color-grey-300: #d1d1d1;
  --color-grey-400: #b8b8b8;
  --color-grey-500: #999999;
  --color-grey-600: #757575;
  --color-grey-700: #666666;
  --color-grey-800: #333333;
  --color-grey-900: #1a1a1a;
  --color-black: #000000;

  /* Typography Families */
  --font-heading: "Kumbh Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spacing Scale (Exact from variable collection) */
  --space-xxxs: 2px;
  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;
  --space-xxxl: 48px;
  --space-4xl: 56px;
  --space-5xl: 64px;
  --space-6xl: 72px;
  --space-7xl: 80px;
  --space-8xl: 88px;
  --space-pill: 999px;

  /* Strokes & Borders */
  --stroke-xxs: 0.5px;
  --stroke-sm: 1px;
  --stroke-md: 2px;
  --stroke-lg: 3px;
  --stroke-xl: 4px;

  /* Corner Radii */
  --radius-xxs: 2px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-subtle: 0 4px 20px rgba(7, 25, 67, 0.05);
  --shadow-hover: 0 12px 32px rgba(7, 25, 67, 0.09);
  --shadow-mobile-frame: 0 25px 60px -12px rgba(7, 25, 67, 0.2), 0 0 0 1px rgba(7, 25, 67, 0.08);

  /* Transitions */
  --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}