/* Global theme variables and typography scale */
:root {
	--font-sans: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

	--font-size: 16px;
	--radius: 12px;

	/* Light mode (fallback) */
	--background: 0 0% 100%;
	--foreground: 240 10% 3.9%;

	--card: 0 0% 100%;
	--card-foreground: 240 10% 3.9%;

	--popover: 0 0% 100%;
	--popover-foreground: 240 10% 3.9%;

	--primary: 262 83% 58%; /* violet */
	--primary-foreground: 0 0% 100%;

	--secondary: 240 4.8% 95.9%;
	--secondary-foreground: 240 5.9% 10%;

	--muted: 240 4.8% 95.9%;
	--muted-foreground: 240 3.8% 46.1%;

	--accent: 240 4.8% 95.9%;
	--accent-foreground: 240 5.9% 10%;

	--destructive: 0 84.2% 60.2%;
	--destructive-foreground: 0 0% 98%;

	--border: 240 5.9% 90%;
	--input: 240 5.9% 90%;
	--ring: var(--primary);
}

.dark {
	--background: 240 10% 3.9%;
	--foreground: 0 0% 98%;

	--card: 240 10% 3.9%;
	--card-foreground: 0 0% 98%;

	--popover: 240 10% 3.9%;
	--popover-foreground: 0 0% 98%;

	--primary: 262 83% 58%;
	--primary-foreground: 0 0% 100%;

	--secondary: 240 3.7% 15.9%;
	--secondary-foreground: 0 0% 98%;

	--muted: 240 3.7% 15.9%;
	--muted-foreground: 240 5% 64.9%;

	--accent: 240 3.7% 15.9%;
	--accent-foreground: 0 0% 98%;

	--destructive: 0 62.8% 30.6%;
	--destructive-foreground: 0 0% 98%;

	--border: 240 3.7% 15.9%;
	--input: 240 3.7% 15.9%;
	--ring: var(--primary);
}

html { font-size: var(--font-size); }
body {
	font-family: var(--font-sans);
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
}

/* Cards and surfaces */
.card {
	background-color: hsl(var(--card));
	color: hsl(var(--card-foreground));
	border: 1px solid hsl(var(--border));
	border-radius: var(--radius);
}

.muted { color: hsl(var(--muted-foreground)); }
.border { border-color: hsl(var(--border)); }
.accent-bg { background-color: hsl(var(--accent)); }
.primary-bg { background-color: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }

/* Buttons */
.btn {
	border-radius: calc(var(--radius) - 4px);
	border: 1px solid hsl(var(--border));
}
.btn-primary {
	background-color: hsl(var(--primary));
	color: hsl(var(--primary-foreground));
}
.btn-muted { background-color: hsl(var(--muted)); color: hsl(var(--muted-foreground)); }

/* Inputs */
input, select, textarea {
	background-color: hsl(var(--background));
	color: hsl(var(--foreground));
	border: 1px solid hsl(var(--input));
	border-radius: 8px;
}

/* Typography tweaks for headings on homepage */
h1 { font-weight: 800; letter-spacing: -0.02em; }
h2 { font-weight: 700; letter-spacing: -0.01em; }
h3 { font-weight: 700; }

/* Utility helpers used on the home page */
.glass {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.1);
	backdrop-filter: blur(10px);
}

.code-editor {
	background: #1e1e2e;
	border: 1px solid #313244;
	border-radius: 12px;
	font-family: var(--font-mono);
}

.terminal-header { background: #313244; }
.line-number { color: #6c7086; }
.code-content { color: #cdd6f4; }
.keyword { color: #cba6f7; }
.function { color: #89b4fa; }
.string { color: #a6e3a1; }
.number { color: #fab387; }
.comment { color: #6c7086; }