:root {
  /* Brand */
  --color-primary: #7c3aed;
  --color-primary-dark: #6d28d9;
  --color-primary-light: #a855f7;
  --color-primary-soft: #f3e8ff;
  --color-nav-active: #8b5cf6;
  --color-nav-underline: #3b82f6;
  --gradient-primary: linear-gradient(98.47deg, #0046BE -19.6%, #A13DFF 79.52%);

  --gradient-primary-hover: linear-gradient(90deg, #4338ca 0%, #6d28d9 50%, #a855f7 100%);
  --gradient-connect: linear-gradient(160deg, rgba(53, 87, 246, 1) 0%, rgba(106, 60, 255, 1) 50%, rgba(22, 195, 230, 1) 100%);
  --gradient-connect-card: linear-gradient(338deg,rgba(217, 204, 255, 0.16) 67%, rgba(217, 204, 255, 1) 100%);;

  /* text-colors */
  --text-primary: #0A0B0B;
  --text-secondary: #55678B;
  /* --text-tertiary: #9ca3af; 
  --text-quaternary: #d1d5db;
  --text-quinary: #f3f4f6;
  --text-senary: #f9fafb;
  --text-septenary: #fafafa;
  --text-octonary: #fbfbfb;
  --text-nonary: #fcfcfc; */

  /* Neutrals */
  --color-ink: #111827;
  --color-ink-soft: #1f2937;
  --color-muted: #6b7280;
  --color-muted-light: #9ca3af;
  --color-border: #e5e7eb;
  --color-border-soft: #f3f4f6;
  --color-surface: #ffffff;
  --color-surface-alt: #f9fafb;
  --color-bg: #ffffff;

  /* Accents */
  --color-blue: #3b82f6;
  --color-green: #22c55e;
  --color-teal: #14b8a6;

  /* Typography */
  --font-sans: "Outfit", system-ui, -apple-system, sans-serif;
  --font-display: "Thatura", "Outfit", system-ui, -apple-system, sans-serif;

  /* Layout — standard container scale */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container: var(--container-xl);
  --container-wide: var(--container-2xl);
  --gutter: 24px;
  --gutter-lg: 32px;

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

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.04);
  --shadow-md: 0 4px 16px rgba(17, 24, 39, 0.06);
  --shadow-lg: 0 12px 40px rgba(17, 24, 39, 0.08);
  --shadow-card: 0 2px 12px rgba(124, 58, 237, 0.06), 0 1px 3px rgba(17, 24, 39, 0.04);
  --shadow-hero: 0 24px 64px rgba(124, 58, 237, 0.15);

  /* Motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration: 0.25s;

  /* Header */
  --header-height: 72px;
}