@import "tailwindcss";

:root {
  --background: #f8fafc; /* slate-50 */
  --foreground: #0f172a; /* slate-900 */
  --surface: #ffffff;
  --surface-foreground: #0f172a;
  --border: #e5e7eb; /* slate-200 */
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

/* Force light theme for demo: keep consistent visuals regardless of OS theme */

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@media print {
  header, footer, nav { display: none !important; }
  body { background: white !important; color: #111 !important; }
}

/* Dark theme variables when data-theme="dark" */
[data-theme="dark"] {
  --background: #0b1220; /* deep slate/navy */
  --foreground: #e5e7eb;
  --surface: #111827; /* slate-900 */
  --surface-foreground: #e5e7eb;
  --border: #1f2937; /* slate-800 */
}

/* Reusable primitives */
.card { background: var(--surface); color: var(--surface-foreground); }
.surface-bg { background: var(--surface); }
.border-color { border-color: var(--border); }
