style.css

/* CSS Reset and base */
*,
*::before,
*::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
  line-height: 1.5;
  background: theme(colors.zinc.50);
  color: theme(colors.zinc.900);
}
@media (prefers-color-scheme: dark) {
  body { background: theme(colors.zinc.950); color: theme(colors.zinc.100); }
}

/* Utilities generated from requested config */
:root {
  --color-primary-50: 249 250 251;   /* gray-50 */
  --color-primary-100: 243 244 246;  /* gray-100 */
  --color-primary-200: 229 231 235;  /* gray-200 */
  --color-primary-300: 209 213 219;  /* gray-300 */
  --color-primary-400: 156 163 175;  /* gray-400 */
  --color-primary-500: 107 114 128;  /* gray-500 */
  --color-primary-600: 75 85 99;     /* gray-600 */
  --color-primary-700: 55 65 81;     /* gray-700 */
  --color-primary-800: 31 41 55;     /* gray-800 */
  --color-primary-900: 17 24 39;     /* gray-900 */

  --color-secondary-50: 248 250 252; /* slate-50 */
  --color-secondary-100: 241 245 249;/* slate-100 */
  --color-secondary-200: 226 232 240;/* slate-200 */
  --color-secondary-300: 203 213 225;/* slate-300 */
  --color-secondary-400: 148 163 184;/* slate-400 */
  --color-secondary-500: 100 116 139;/* slate-500 */
  --color-secondary-600: 71 85 105;  /* slate-600 */
  --color-secondary-700: 51 65 85;   /* slate-700 */
  --color-secondary-800: 30 41 59;   /* slate-800 */
  --color-secondary-900: 15 23 42;   /* slate-900 */
}

/* Primary palette */
.bg-primary-500 { background-color: rgb(var(--color-primary-500)); }
.hover\:bg-primary-600:hover { background-color: rgb(var(--color-primary-600)); }
.text-primary-500 { color: rgb(var(--color-primary-500)); }
.border-primary-500 { border-color: rgb(var(--color-primary-500)); }
.shadow-primary-500\/30 { box-shadow: 0 10px 15px -3px rgba(var(--color-primary-500)/0.30), 0 4px 6px -2px rgba(var(--color-primary-500)/0.20); }

/* Secondary palette */
.bg-secondary-500 { background-color: rgb(var(--color-secondary-500)); }
.hover\:bg-secondary-600:hover { background-color: rgb(var(--color-secondary-600)); }
.text-secondary-500 { color: rgb(var(--color-secondary-500)); }
.border-secondary-500 { border-color: rgb(var(--color-secondary-500)); }
.shadow-secondary-500\/30 { box-shadow: 0 10px 15px -3px rgba(var(--color-secondary-500)/0.30), 0 4px 6px -2px rgba(var(--color-secondary-500)/0.20); }

/* Selection */
::selection {
  background: rgba(var(--color-primary-500), 0.2);
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Remove default link underlines on brand */
a { color: inherit; text-decoration: none; }

/* Backdrop blur fallback */
@supports not (backdrop-filter: blur(0)) {
  .supports-\[backdrop-filter\]\:bg-white\/40 { background-color: rgba(255,255,255,0.85); }
  .dark .supports-\[backdrop-filter\]\:bg-zinc-950\/40 { background-color: rgba(9,9,11,0.9); }
}