@import "tailwindcss";

:root {
  --background: #030712;
  --foreground: #f3f4f6;
  --surface: #111827;
  --elevated: #1f2937;
  --inset: #0a0f1a;
  --border: #1f2937;
  --subtle: #374151;
  --muted: #6b7280;
  --dim: #4b5563;
  --accent: #10b981;
  --accent-hover: #059669;
  --heading: #ffffff;
  --secondary: #d1d5db;
  --tertiary: #9ca3af;
}

[data-theme="light"] {
  --background: #f8fafc;
  --foreground: #1e293b;
  --surface: #ffffff;
  --elevated: #f1f5f9;
  --inset: #e2e8f0;
  --border: #e2e8f0;
  --subtle: #cbd5e1;
  --muted: #64748b;
  --dim: #94a3b8;
  --accent: #059669;
  --accent-hover: #047857;
  --heading: #0f172a;
  --secondary: #334155;
  --tertiary: #64748b;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-surface: var(--surface);
  --color-elevated: var(--elevated);
  --color-inset: var(--inset);
  --color-border: var(--border);
  --color-subtle: var(--subtle);
  --color-muted: var(--muted);
  --color-dim: var(--dim);
  --color-accent: var(--accent);
  --color-accent-hover: var(--accent-hover);
  --color-heading: var(--heading);
  --color-secondary: var(--secondary);
  --color-tertiary: var(--tertiary);

  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html,
body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: none;
  touch-action: pan-y;
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

@keyframes img-fade-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}