tailwind.config.js

const { themeColors } = require("./theme.config");
const plugin = require("tailwindcss/plugin");

const tailwindColors = Object.fromEntries(
  Object.entries(themeColors).map(([name, swatch]) => [
    name,
    {
      DEFAULT: `var(--color-${name})`,
      light: swatch.light,
      dark: swatch.dark,
    },
  ]),
);

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  // Scan all component and app files for Tailwind classes
  content: ["./app/**/*.{js,ts,tsx}", "./components/**/*.{js,ts,tsx}", "./lib/**/*.{js,ts,tsx}", "./hooks/**/*.{js,ts,tsx}"],

  presets: [require("nativewind/preset")],
  theme: {
    extend: {
      fontFamily: {
        sans: ["'Inter'", 'system-ui', '-apple-system', 'sans-serif'],
        display: ["'Space Grotesk'", 'system-ui', 'sans-serif'],
      },
      colors: {
        ...tailwindColors,
        void: '#0a0a0a',
        obsidian: '#0f1419',
        onyx: '#151b23',
        electric: '#EF4444',
        emerald: '#10b981',
        amber: '#f59e0b',
        alert: '#ef4444',
        cyan: '#DC2626',
        chrome: '#64748b',
      },
      borderRadius: {
        'glass': '24px',
        'glass-sm': '16px',
        'glass-input': '20px',
      },
      boxShadow: {
        'glass': '0 8px 32px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.5)',
        'glass-glow': '0 4px 20px rgba(239,68,68,0.25), 0 0 40px rgba(239,68,68,0.1)',
        'glass-elevated': '0 16px 48px rgba(0,0,0,0.08)',
      },
      backdropBlur: {
        'glass': '24px',
        'glass-sm': '16px',
      },
    },
  },
  corePlugins: {
    // Disable aspect-ratio utilities — react-native-css-interop crashes on parseAspectRatio
    // with Tailwind's generated aspect-ratio CSS. Not used in the app.
    aspectRatio: false,
  },
  plugins: [
    plugin(({ addVariant }) => {
      addVariant("light", ':root:not([data-theme="dark"]) &');
      addVariant("dark", ':root[data-theme="dark"] &');
    }),
  ],
};