{
	"$schema": "../schemas/code-crispies-module-schema.json",
	"id": "colors-backgrounds",
	"title": "CSS Colors",
	"description": "Learn how to apply colors to text and backgrounds using CSS properties.",
	"difficulty": "beginner",
	"lessons": [
		{
			"id": "colors-1",
			"title": "Background Color",
			"description": "Color is one of the most powerful tools in web design. It creates visual hierarchy, conveys meaning, and establishes brand identity. CSS provides multiple ways to specify colors.<br><br><strong>CSS named colors:</strong> CSS includes 147 named colors like <kbd>steelblue</kbd>, <kbd>coral</kbd>, <kbd>gold</kbd>, and <kbd>tomato</kbd>. These are easy to remember and read.<br><br><strong>The background-color property:</strong> Sets the fill color behind an element's content and padding areas. The color extends to the edge of the element's border.<br><br><pre>.box {\n  background-color: lightblue;\n}</pre>",
			"task": "Set <kbd>background-color</kbd> to <kbd>lightcyan</kbd> on <kbd>.box</kbd>.",
			"previewHTML": "<div class=\"box\">Background Demo</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; border: 2px solid steelblue; }",
			"sandboxCSS": "",
			"codePrefix": ".box {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "background-color", "expected": "lightcyan" },
					"message": "Set <kbd>background-color: lightcyan</kbd>"
				}
			]
		},
		{
			"id": "colors-2",
			"title": "Text Color",
			"description": "The <kbd>color</kbd> property sets the color of text content. Good contrast between text and background is essential for readability.",
			"task": "Set <kbd>color</kbd> to <kbd>darkslategray</kbd> on <kbd>.box</kbd>.",
			"previewHTML": "<div class=\"box\">Color & Contrast</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; background-color: lightcyan; border: 2px solid steelblue; }",
			"sandboxCSS": "",
			"codePrefix": ".box {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "color", "expected": "darkslategray" },
					"message": "Set <kbd>color: darkslategray</kbd>"
				}
			]
		},
		{
			"id": "colors-3",
			"title": "Border Color",
			"description": "Borders can have their own color using <kbd>border-color</kbd>, or you can specify color in the border shorthand.",
			"task": "Set <kbd>border-color</kbd> to <kbd>coral</kbd> on <kbd>.box</kbd>.",
			"previewHTML": "<div class=\"box\">Border Color</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; background-color: seashell; border: 4px solid gray; }",
			"sandboxCSS": "",
			"codePrefix": ".box {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "border-color", "expected": "coral" },
					"message": "Set <kbd>border-color: coral</kbd>"
				}
			]
		},
		{
			"id": "colors-4",
			"title": "Color Formats",
			"description": "Besides named colors, CSS supports hex codes (<kbd>#ff6347</kbd>), RGB (<kbd>rgb(255, 99, 71)</kbd>), and HSL (<kbd>hsl(9, 100%, 64%)</kbd>) formats.",
			"task": "Set <kbd>background-color</kbd> to <kbd>#f0e68c</kbd> (khaki in hex) on <kbd>.box</kbd>.",
			"previewHTML": "<div class=\"box\">Hex Color</div>",
			"previewBaseCSS": "body { font-family: system-ui, sans-serif; padding: 1rem; } .box { padding: 1rem; border: 2px solid olive; }",
			"sandboxCSS": "",
			"codePrefix": ".box {\n  ",
			"initialCode": "",
			"codeSuffix": "\n}",
			"previewContainer": "preview-area",
			"validations": [
				{
					"type": "property_value",
					"value": { "property": "background-color", "expected": "#f0e68c" },
					"message": "Set <kbd>background-color: #f0e68c</kbd>"
				}
			]
		}
	]
}