/* theme/typography.css
 * Layer: tokens
 * Font families, sizes, weights, line heights, letter spacing
 *
 * This file defines the complete typography system:
 * - Font family stacks (sans, mono, serif)
 * - Font size scale (--text-xs to --text-2xl) - calculated from --default-font-size
 * - Line height scale (--leading-*)
 * - Font weights (--font-*)
 * - Letter spacing (--tracking-*)
 */

@layer tokens {
	:root {
		/* ─── Font Families ──
		 * System font stacks for optimal performance and native look
		 * Usage: font-family: var(--font-sans);
		 */

		/* Sans-serif: system UI fonts with emoji support */
		--font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';

		/* Monospace: system code fonts including Cascadia Code for Windows */
		--font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace;

		/* Serif: system serif fonts for traditional typography */
		--font-serif: ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;

		/* ─── Font Size Scale ──
		 * Type scale calculated from --default-font-size (14px base)
		 * Usage: font-size: calc(var(--default-font-size) * 1.5);
		 */

		--text-xs: calc(var(--default-font-size) * 0.786);  /* 11px - tiny labels, captions */
		--text-sm: calc(var(--default-font-size) * 0.929);  /* 13px - small text, metadata */
		--text-base: var(--default-font-size);              /* 14px - body text default */
		--text-md: calc(var(--default-font-size) * 1.143);  /* 16px - large body, lead text */
		--text-lg: calc(var(--default-font-size) * 1.286);  /* 18px - section headings */
		--text-xl: calc(var(--default-font-size) * 1.429);  /* 20px - page headings */
		--text-2xl: calc(var(--default-font-size) * 1.714); /* 24px - large headings */
		--text-3xl: calc(var(--default-font-size) * 2.286); /* 32px - hero headings */
		--text-4xl: calc(var(--default-font-size) * 2.857); /* 40px - display headings */
		--text-5xl: calc(var(--default-font-size) * 3.429); /* 48px - display/hero */
		
		/* ─── Line Heights (Leading) ──
		 * Vertical rhythm scale calculated from --default-leading (1.5 base)
		 * Usage: line-height: calc(var(--default-leading) * 0.833);
		 */
		--leading-none: calc(var(--default-leading) * 0.667);   /* 1.0 - tight, buttons, chips */
		--leading-tight: calc(var(--default-leading) * 0.833);  /* 1.25 - headings */
		--leading-snug: calc(var(--default-leading) * 0.917);   /* 1.375 - subheadings */
		--leading-normal: var(--default-leading);               /* 1.5 - body text default */
		--leading-relaxed: calc(var(--default-leading) * 1.083); /* 1.625 - readable paragraphs */
		--leading-loose: calc(var(--default-leading) * 1.333);  /* 2.0 - very loose, poetry */
		
		/* ─── Font Weights ──
		 * Standard numeric weight values
		 * Usage: font-weight: var(--font-semibold);
		 */

		--font-normal: 400;   /* regular text */
		--font-medium: 500;   /* emphasis, labels */
		--font-semibold: 600; /* strong emphasis, headings */
		--font-bold: 700;     /* maximum emphasis */
		--font-black: 900;    /* hero/display weight */
		
		/* ─── Letter Spacing (Tracking) ──
		 * Horizontal letter spacing adjustments calculated from --default-tracking
		 * Usage: letter-spacing: calc(var(--default-tracking) * 3em);
		 */
		--tracking-tight: calc(var(--default-tracking) - 0.01em);   /* -1% - headings, large text */
		--tracking-normal: var(--default-tracking);                 /* 0% - body text default */
		--tracking-wide: calc(var(--default-tracking) + 0.03em);    /* 3% - uppercase labels */
		--tracking-wider: calc(var(--default-tracking) + 0.05em);   /* 5% - code, technical */
		--tracking-caps: calc(var(--default-tracking) + 0.08em);    /* 8% - all-caps headings */
	}
}