style.css

/* CSS Variables (with safe fallbacks) for "undefined" colors and theme mode */

/* 1) Primary and secondary RGB values (fallback to blue and rose) */
:root {
  --color-primary: 59 130 246;     /* Tailwind blue-500 */
  --color-secondary: 236 72 153;   /* Tailwind pink-500 */
}

/* 2) Light mode by default ("undefined mode" -> light) */
:root {
  --bg-1: 255 255 255;   /* background */
  --bg-2: 248 250 252;   /* surface */
  --fg-1: 15 23 42;      /* main text */
  --fg-2: 100 116 139;   /* muted text */
}

/* 3) Dark mode overrides */
:root[data-theme="dark"] {
  --bg-1: 2 6 23;        /* background */
  --bg-2: 15 23 42;      /* surface */
  --fg-1: 248 250 252;   /* main text */
  --fg-2: 148 163 184;   /* muted text */
}

/* Optional smoother transitions for theme changes */
* {
  transition:
    background-color 160ms ease,
    color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

/* Utilities for components */
.container {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

.card {
  border-radius: 1rem;
  border: 1px solid rgb(var(--fg-2) / 0.18);
  background-color: rgb(var(--bg-2));
  box-shadow: 0 8px 30px rgb(0 0 0 / 0.08);
}