@import "tailwindcss";

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

@theme {
  --color-bg: #ffffff;
  --color-bg-alt: #f8fafc;
  --color-primary: #2563eb; /* blue-600 */
  --color-secondary: #f97316; /* orange-500 */
  --color-text: #0f172a; /* slate-900 */
  --color-muted: #64748b; /* slate-500 */
  --color-border: #e5e7eb; /* gray-200 */

}
:root {
  --color-bg: 248 250 252;      /* slate-50 */
  --color-card: 255 255 255;    /* white */
  --color-text: 15 23 42;       /* slate-900 */
  --color-border: 226 232 240;  /* slate-200 */
  --color-link: 56 189 248;     /* sky-400 */
  --color-muted: 100 116 139;   /* slate-500 */
}

.dark {
  --color-bg: 11 18 32;         /* deep navy */
  --color-card: 17 24 39;       /* slate-800/900 feel */
  --color-text: 241 245 249;    /* slate-100 */
  --color-border: 51 65 85;     /* slate-700 */
  --color-link: 56 189 248;     /* keep accent bright */
  --color-muted: 148 163 184;   /* slate-400 */
}
html,
body,
#root {
  min-height: 100%;
}

body {
  @apply bg-bg text-text transition-colors duration-300;
}

.theme-gradient {
  background: linear-gradient(
    90deg,
    #4b5563 0%,
    #3b82f6 35%,
    #22c55e 65%,
    #facc15 100%
  );
}