/* ================================================================
   DESIGN SYSTEM TOKENS — Foursees
   Extracted from foursees_Full_Content.html :root block
   ================================================================ */
:root {
  /* === Primary Purple Scale === */
  --primary-50: #f5eef6;
  --primary-100: #eddcee;
  --primary-200: #dbb9dc;
  --primary-300: #c996cb;
  --primary-400: #b773ba;
  --primary-500: #a352a6;
  --primary-600: #864388;
  --primary-700: #69356a;
  --primary-800: #4b264d;
  --primary-900: #2d1730;
  --primary-alpha-10: rgba(163,82,166,0.10);
  --primary-alpha-20: rgba(163,82,166,0.20);

  /* === Secondary Blue Scale === */
  --secondary-100: #95cbfd;
  --secondary-200: #61b2fb;
  --secondary-300: #2c98fa;
  --secondary-400: #057deb;
  --secondary-500: #0461b6;
  --secondary-600: #034581;
  --secondary-700: #02325e;
  --secondary-800: #01203c;

  /* === Blue Extended === */
  --blue-50: #eef6fd;
  --blue-100: #95cbfd;
  --blue-200: #61b2fb;
  --blue-300: #2c98fa;
  --blue-400: #057deb;
  --blue-500: #0461b6;
  --blue-600: #034581;
  --blue-700: #02325e;
  --blue-800: #01203c;
  --blue-900: #001528;

  /* === Green Scale === */
  --green-50: #f0f8ec;
  --green-100: #dbf0d4;
  --green-200: #b7e1a8;
  --green-300: #93d27d;
  --green-400: #6fc352;
  --green-500: #54a338;
  --green-600: #45862e;
  --green-700: #366924;
  --green-800: #274d1a;
  --green-900: #183210;

  /* === Smoky (Neutral Cool) === */
  --smoky-100: #c5cfd8;
  --smoky-200: #a7b7c5;
  --smoky-300: #8a9fb2;
  --smoky-400: #6d879f;
  --smoky-500: #576e84;
  --smoky-600: #445667;
  --smoky-700: #313e4a;
  --smoky-800: #1d252d;

  /* === Neutral Extended === */
  --neutral-50: #f5f7f9;
  --neutral-100: #e8ecf0;
  --neutral-200: #c5cfd8;
  --neutral-300: #a7b7c5;
  --neutral-400: #8a9fb2;
  --neutral-500: #6d879f;
  --neutral-600: #576e84;
  --neutral-700: #445667;
  --neutral-800: #313e4a;
  --neutral-900: #1d252d;

  /* === Surfaces === */
  --surface-white: #ffffff;
  --surface-soft: #f7f8fa;
  --surface-dark: #1d252d;
  --surface-darker: #151b22;
  --surface-purple: #4b264d;
  --surface-purple-deep: #351a38;

  /* === Semantic Colors === */
  --success: #54a338;
  --warning: #d4930d;
  --error: #c93b3b;
  --info: #0461b6;

  /* === Background Tokens === */
  --bg-primary: #ffffff;
  --bg-secondary: #f5f7f9;
  --bg-tertiary: #eef6fd;
  --bg-dark: #1d252d;
  --bg-dark-alt: #0d1117;

  /* === Text Tokens === */
  --text-primary: #1d252d;
  --text-secondary: #445667;
  --text-tertiary: #6d879f;
  --text-inverse: #ffffff;
  --text-link: #0461b6;

  /* === Typography === */
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'DM Sans', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;

  /* === Shadows === */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-xl: 0 24px 60px rgba(0,0,0,0.16);
  --shadow-purple: 0 8px 40px rgba(163,82,166,0.25);
  --shadow-purple-lg: 0 20px 60px rgba(163,82,166,0.3);
  --shadow-glow: 0 0 60px rgba(163,82,166,0.3);

  /* === Radii === */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === Easings === */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* === Spacing Scale === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --space-11: 80px;
  --space-12: 96px;
  --space-13: 120px;
}