{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "typography-fonts",
	"title": "Typography",
	"description": "Learn how to control text appearance through font selection, sizing, spacing, and decorative effects.",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "typography-1",
			"title": "Font Family & Fallbacks",
			"description": "Specify custom fonts and reliable fallback stacks for consistent typography across devices.",
			"task": "Set the <code>font-family</code> of the '.text' element to 'Georgia, serif' with serif fallback.",
			"previewHTML": "<p class=\"text\">This text shows the chosen font family.</p>",
			"previewBaseCSS": "body { padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": ".text {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"solution": "font-family: Georgia, serif;",
			"validations": [
				{
					"type": "contains",
					"value": "font-family",
					"message": "Use the <kbd>font-family</kbd> property",
					"options": { "caseSensitive": false }
				},
				{
					"type": "regex",
					"value": "Georgia, serif",
					"message": "Include <kbd>Georgia, serif</kbd> in the font stack",
					"options": { "caseSensitive": false }
				}
			]
		},
		{
			"id": "typography-2",
			"title": "Font Size & Line Height",
			"description": "Control text scale and readability by adjusting size and line heights.",
			"task": "Set the heading '.heading' to 1.5rem font-size and 1.5 line-height.",
			"previewHTML": "<h2 class=\"heading\">Readable Heading</h2>",
			"previewBaseCSS": "body { padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": ".heading {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"solution": "font-size: 1.5rem;\n  line-height: 1.5;",
			"validations": [
				{ "type": "contains", "value": "font-size", "message": "Use <kbd>font-size</kbd> property", "options": { "caseSensitive": false } },
				{
					"type": "property_value",
					"value": { "property": "font-size", "expected": "1.5rem" },
					"message": "Set font-size to <kbd>1.5rem</kbd>"
				},
				{
					"type": "contains",
					"value": "line-height",
					"message": "Use <kbd>line-height</kbd> property",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "line-height", "expected": "1.5" },
					"message": "Set line-height to <kbd>1.5</kbd>"
				}
			]
		},
		{
			"id": "typography-3",
			"title": "Font Weight & Style",
			"description": "Apply weight and style variations like bold, light, italic to emphasize text.",
			"task": "Make the paragraph '.emphasis' italic and bold using <code>font-style</code> and <code>font-weight</code>.",
			"previewHTML": "<p class=\"emphasis\">This text should stand out.</p>",
			"previewBaseCSS": "body { padding: 1rem; }",
			"sandboxCSS": "",
			"codePrefix": ".emphasis {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"solution": "font-style: italic;\n  font-weight: bold;",
			"validations": [
				{ "type": "contains", "value": "font-style", "message": "Use <kbd>font-style</kbd> property", "options": { "caseSensitive": false } },
				{
					"type": "property_value",
					"value": { "property": "font-style", "expected": "italic" },
					"message": "Set font-style to <kbd>italic</kbd>"
				},
				{
					"type": "contains",
					"value": "font-weight",
					"message": "Use <kbd>font-weight</kbd> property",
					"options": { "caseSensitive": false }
				},
				{
					"type": "property_value",
					"value": { "property": "font-weight", "expected": "bold" },
					"message": "Set font-weight to <kbd>bold</kbd>"
				}
			]
		},
		{
			"id": "typography-4",
			"title": "Text Decoration & Shadow",
			"description": "Add decorative underlines, overlines, line-throughs and subtle shadows to text.",
			"task": "Apply an underline with <code>text-decoration</code> and a light shadow using <code>text-shadow</code> on '.fancy'.",
			"previewHTML": "<p class=\"fancy\">Fancy text effect!</p>",
			"previewBaseCSS": "body { padding: 1rem; } .fancy { font-size: 1.25rem; }",
			"sandboxCSS": "",
			"codePrefix": ".fancy {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"solution": "text-decoration: underline;\n  text-shadow: 1px 1px 2px gray;",
			"validations": [
				{
					"type": "contains",
					"value": "text-decoration",
					"message": "Use <kbd>text-decoration</kbd> property",
					"options": { "caseSensitive": false }
				},
				{
					"type": "contains",
					"value": "text-shadow",
					"message": "Use <kbd>text-shadow</kbd> property",
					"options": { "caseSensitive": false }
				}
			]
		}
	]
}