:root {
  /* ==========================================================================
     Primitive Colors (Obsidian, Amber, Gray, White)
     ========================================================================== */
  --color-obsidian-950: #07080A;
  --color-obsidian-900: #0D0F12;
  --color-obsidian-800: #16191F;
  --color-obsidian-700: #1E232B;
  --color-obsidian-600: #262C36;

  --color-amber-500: #F59E0B;
  --color-amber-600: #D97706;

  --color-gray-50: #F8F9FA;
  --color-gray-100: #EEF0F3;
  --color-gray-200: #E4E7EC;
  --color-gray-300: #D9DDE3;
  --color-gray-400: #9CA3AF;
  --color-gray-500: #6B7280;
  --color-gray-900: #111827;

  --color-white-pure: #F3F4F6;

  /* ==========================================================================
     Semantic Colors (Baseline: Nocturnal Dark Mode)
     ========================================================================== */
  --color-bg-canvas: #0D0F12;
  --color-bg-surface: #16191F;
  --color-bg-surface-hover: #1E232B;
  --color-bg-surface-active: #262C36;

  --color-text-primary: #F3F4F6;
  --color-text-secondary: #9CA3AF;

  --color-action-accent: #F59E0B;
  --color-action-focus-ring: #F59E0B;

  /* ==========================================================================
     Dimensions & Spacing (8-pt Grid)
     ========================================================================== */
  --space-0: 0px;
  --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-14: 56px;
  --space-16: 64px;
  --space-18: 72px;
  --space-22: 88px;
  --space-24: 96px;
  --space-container-mobile: 335px;
  --space-container-desktop: 480px;

  /* Spacing Aliases (--spacing-*) */
  --spacing-0: var(--space-0);
  --spacing-1: var(--space-1);
  --spacing-2: var(--space-2);
  --spacing-3: var(--space-3);
  --spacing-4: var(--space-4);
  --spacing-5: var(--space-5);
  --spacing-6: var(--space-6);
  --spacing-8: var(--space-8);
  --spacing-10: var(--space-10);
  --spacing-12: var(--space-12);
  --spacing-14: var(--space-14);
  --spacing-16: var(--space-16);
  --spacing-18: var(--space-18);
  --spacing-22: var(--space-22);
  --spacing-24: var(--space-24);
  --spacing-container-mobile: var(--space-container-mobile);
  --spacing-container-desktop: var(--space-container-desktop);

  /* ==========================================================================
     Radii
     ========================================================================== */
  --radius-none: 0px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-full: 9999px;

  /* ==========================================================================
     Typography
     ========================================================================== */
  --font-family-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --font-size-caption: 13px;
  --font-size-body-sm: 15px;
  --font-size-body-md: 16px;
  --font-size-title-md: 24px;
  --font-size-title-lg: 28px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ==========================================================================
     Component Mappings
     ========================================================================== */
  --link-card-min-height: 56px;
  --link-card-padding-x: 20px;
  --link-card-padding-y: 16px;
  --link-card-gap: 16px;
  --link-card-radius: 12px;

  --profile-avatar-size-mobile: 88px;
  --profile-avatar-size-desktop: 96px;
  --profile-gap: 16px;

  --container-max-width-mobile: 335px;
  --container-max-width-desktop: 480px;
  --container-gap-mobile: 32px;
  --container-gap-desktop: 40px;

  /* Motion */
  --transition-surface: background-color 150ms cubic-bezier(0.16, 1, 0.3, 1), outline-color 150ms ease;
}