These are the custom Tailwind theme colors and fonts we're applying across our app. The `500` color weight is the same as the default color weight.

xsy-tailwind-theme.css

@import 'tailwindcss';

@custom-variant dark (&:where(.dark, .dark *));

/* Custom theme configuration for Tailwind 4.x */
@theme static {
    /* Override Default Tailwind Colors */
    --color-orange: #f39243;
    --color-orange-50: #fef4ec;
    --color-orange-100: #fde9d9;
    --color-orange-200: #fad3b2;
    --color-orange-300: #f8bc8c;
    --color-orange-400: #f6a96a;
    --color-orange-500: #f39243;
    --color-orange-600: #eb720f;
    --color-orange-700: #ad540b;
    --color-orange-800: #733807;
    --color-orange-900: #3a1c04;
    --color-orange-950: #1d0e02;

    --color-red: #d92d20;
    --color-red-50: #fceae9;
    --color-red-100: #f8d5d3;
    --color-red-200: #f2aba6;
    --color-red-300: #eb7d75;
    --color-red-400: #e45449;
    --color-red-500: #d92d20;
    --color-red-600: #ad241a;
    --color-red-700: #811b13;
    --color-red-800: #59120d;
    --color-red-900: #2c0907;
    --color-red-950: #160503;

    --color-pink: #d62084;
    --color-pink-50: #fce9f3;
    --color-pink-100: #f8d3e7;
    --color-pink-200: #f1a2cd;
    --color-pink-300: #ea75b6;
    --color-pink-400: #e4499e;
    --color-pink-500: #d62084;
    --color-pink-600: #ad1a6b;
    --color-pink-700: #81134f;
    --color-pink-800: #540d34;
    --color-pink-900: #2c071b;
    --color-pink-950: #16030e;

    --color-blue: #3d58f8;
    --color-blue-50: #ebeefe;
    --color-blue-100: #d8ddfe;
    --color-blue-200: #b0bbfc;
    --color-blue-300: #8999fb;
    --color-blue-400: #6177f9;
    --color-blue-500: #3d58f8;
    --color-blue-600: #0929ec;
    --color-blue-700: #061fb1;
    --color-blue-800: #041576;
    --color-blue-900: #020a3b;
    --color-blue-950: #01051e;

    --color-gray: #cccccc;
    --color-gray-50: #fafafa;
    --color-gray-100: #f5f5f5;
    --color-gray-200: #ebebeb;
    --color-gray-300: #e0e0e0;
    --color-gray-400: #d6d6d6;
    --color-gray-500: #cccccc;
    --color-gray-600: #a3a3a3;
    --color-gray-700: #7a7a7a;
    --color-gray-800: #525252;
    --color-gray-900: #292929;
    --color-gray-950: #141414;

    --color-slate: #2d2d2d;
    --color-slate-50: #ebebeb;
    --color-slate-100: #d6d6d6;
    --color-slate-200: #ababab;
    --color-slate-300: #828282;
    --color-slate-400: #575757;
    --color-slate-500: #2d2d2d;
    --color-slate-600: #242424;
    --color-slate-700: #1c1c1c;
    --color-slate-800: #121212;
    --color-slate-900: #0a0a0a;
    --color-slate-950: #050505;

    --color-stone: #222222;
    --color-stone-50: #e8e8e8;
    --color-stone-100: #d4d4d4;
    --color-stone-200: #a6a6a6;
    --color-stone-300: #7a7a7a;
    --color-stone-400: #4f4f4f;
    --color-stone-500: #222222;
    --color-stone-600: #1c1c1c;
    --color-stone-700: #141414;
    --color-stone-800: #0d0d0d;
    --color-stone-900: #080808;
    --color-stone-950: #030303;
    
    --color-green: #27fd55;
    --color-green-50: #ebffef;
    --color-green-100: #d2ffdb;
    --color-green-200: #a9febb;
    --color-green-300: #7cfe98;
    --color-green-400: #53fd78;
    --color-green-500: #27fd55;
    --color-green-600: #02e834;
    --color-green-700: #02ac26;
    --color-green-800: #01741a;
    --color-green-900: #01380c;
    --color-green-950: #001e07;

    --color-black: #0a0a08;
    --color-black-50: #e8e8e3;
    --color-black-100: #d4d4c9;
    --color-black-200: #a7a791;
    --color-black-300: #77775f;
    --color-black-400: #414134;
    --color-black-500: #0a0a08;
    --color-black-600: #090907;
    --color-black-700: #060605;
    --color-black-800: #030302;
    --color-black-900: #030302;
    --color-black-950: #000000;

    /* Poppins Font Family Configuration */
    --font-family-poppins: "Poppins", sans-serif;
    --font-family-sans: "Poppins", system-ui, sans-serif;
}

/* Global base styles */
@layer base {
    /* Set Poppins as default body font */
    body {
        font-family: 'Poppins', system-ui, sans-serif;
        font-feature-settings: "kern", "liga", "clig", "calt";
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Ensure consistent font rendering across all headings */
    h1, h2, h3, h4, h5, h6 {
        font-family: 'Poppins', system-ui, sans-serif;
    }
}

Here are the theme colors just for visual feedback: