/* Base tokens - section-agnostic design tokens */
/* Each section imports this and sets --color-primary */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
	/* IWT Brand Colors */
	--color-navy: #161B40;
	--color-html: #43BEE5;
	--color-css: #41B853;
	--color-http: #EFA500;
	--color-js: #F40058;
	--color-media: #9333EA;

	/* Grays */
	--color-gray-50: #f9fafb;
	--color-gray-100: #f3f4f6;
	--color-gray-200: #e5e7eb;
	--color-gray-600: #4b5563;
	--color-gray-700: #374151;
	--color-gray-800: #1f2937;
	--color-gray-900: #111827;

	/* Semantic colors - section sets --color-primary */
	--color-surface: var(--color-gray-50);
	--color-background: white;
	--color-text: var(--color-gray-900);
	--color-text-muted: var(--color-gray-600);
	--color-border: var(--color-gray-200);
	--color-code-bg: #f4f4f4;
	--color-code-text: #c7254e;

	/* Spacing */
	--size-1: 0.25rem;
	--size-2: 0.5rem;
	--size-3: 0.75rem;
	--size-4: 1rem;
	--size-5: 1.25rem;
	--size-6: 1.5rem;
	--size-8: 2rem;
	--size-10: 2.5rem;
	--size-12: 3rem;

	/* Font sizes */
	--font-size-0: 0.875rem;
	--font-size-1: 1rem;
	--font-size-2: 1.125rem;
	--font-size-3: 1.25rem;
	--font-size-4: 1.5rem;
	--font-size-5: 1.875rem;
	--font-size-6: 2.25rem;

	/* Font families - Inter for brand consistency */
	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	--font-mono: 'Consolas', 'Monaco', 'Courier New', monospace;

	/* Font weights */
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	/* Line heights */
	--line-height-tight: 1.25;
	--line-height-normal: 1.5;
	--line-height-relaxed: 1.75;

	/* Border radius */
	--radius-2: 0.25rem;
	--radius-3: 0.5rem;
	--radius-4: 0.75rem;

	/* Shadows */
	--shadow-1: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--shadow-2: 0 1px 3px 0 rgb(0 0 0 / 0.1);
	--shadow-3: 0 4px 6px -1px rgb(0 0 0 / 0.1);

	/* Max widths */
	--max-width-prose: 65ch;
	--max-width-content: 80rem;
}