@mixin primitive-tokens() {
  :root {
    --ff-white: #ffffff;
    --ff-black: #000000;

    --ff-gray-0: #ffffff;
    --ff-gray-25: #fcfcfc;
    --ff-gray-50: #f8f8f7;
    --ff-gray-75: #f2f2f0;
    --ff-gray-100: #e9e9e6;
    --ff-gray-150: #dcdcd7;
    --ff-gray-200: #c9c9c1;
    --ff-gray-300: #afafa5;
    --ff-gray-400: #8d8d81;
    --ff-gray-500: #69695f;
    --ff-gray-600: #505048;
    --ff-gray-700: #3c3c36;
    --ff-gray-800: #272722;
    --ff-gray-900: #1b1b18;
    --ff-gray-950: #141412;
    --ff-gray-1000: #0f0f0d;

    --ff-alpha-black-04: rgba(15, 15, 13, 0.04);
    --ff-alpha-black-06: rgba(15, 15, 13, 0.06);
    --ff-alpha-black-08: rgba(15, 15, 13, 0.08);
    --ff-alpha-black-10: rgba(15, 15, 13, 0.1);
    --ff-alpha-black-12: rgba(15, 15, 13, 0.12);
    --ff-alpha-black-15: rgba(15, 15, 13, 0.15);
    --ff-alpha-black-20: rgba(15, 15, 13, 0.2);
    --ff-alpha-black-30: rgba(15, 15, 13, 0.3);
    --ff-alpha-black-40: rgba(15, 15, 13, 0.4);
    --ff-alpha-black-60: rgba(15, 15, 13, 0.6);

    --ff-alpha-white-04: rgba(255, 255, 255, 0.04);
    --ff-alpha-white-06: rgba(255, 255, 255, 0.06);
    --ff-alpha-white-08: rgba(255, 255, 255, 0.08);
    --ff-alpha-white-10: rgba(255, 255, 255, 0.1);
    --ff-alpha-white-12: rgba(255, 255, 255, 0.12);
    --ff-alpha-white-15: rgba(255, 255, 255, 0.15);
    --ff-alpha-white-20: rgba(255, 255, 255, 0.2);
    --ff-alpha-white-30: rgba(255, 255, 255, 0.3);
    --ff-alpha-white-40: rgba(255, 255, 255, 0.4);
    --ff-alpha-white-60: rgba(255, 255, 255, 0.6);

    --ff-blue-100: #e8f2ff;
    --ff-blue-200: #bad8ff;
    --ff-blue-300: #7db7ff;
    --ff-blue-400: #4176ff;
    --ff-blue-500: #2759db;
    --ff-blue-600: #1b3f9e;

    --ff-green-100: #e7f7ef;
    --ff-green-300: #71c795;
    --ff-green-400: #2b9b5f;
    --ff-green-500: #1e7748;

    --ff-yellow-100: #fff5de;
    --ff-yellow-300: #e1b354;
    --ff-yellow-400: #bb8121;
    --ff-yellow-500: #916112;

    --ff-red-100: #feeceb;
    --ff-red-300: #e48d85;
    --ff-red-400: #c55245;
    --ff-red-500: #9e3a2f;

    --ff-radius-4: 4px;
    --ff-radius-6: 6px;
    --ff-radius-pill: 999px;

    --ff-font-family-sans:
      'Inter', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
      'Segoe UI Symbol', 'Noto Color Emoji';
    --ff-font-family-mono:
      ui-monospace, 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono',
      'Courier New', monospace;
    --ff-font-size-xs: 12px;
    --ff-font-size-sm: 14px;
    --ff-font-size-md: 16px;
    --ff-font-size-lg: 18px;

    --ff-shadow-1: 0 1px 2px rgba(15, 15, 13, 0.05), 0 8px 20px rgba(15, 15, 13, 0.04);
    --ff-shadow-2: 0 10px 28px rgba(15, 15, 13, 0.08), 0 3px 10px rgba(15, 15, 13, 0.05);
    --ff-shadow-3: 0 18px 48px rgba(15, 15, 13, 0.12), 0 6px 16px rgba(15, 15, 13, 0.08);
  }
}