@import "tokens.css";

@layer reset, layout, tutorial, demo;

@layer reset {
	* {
		margin: 0;
		padding: 0;
		box-sizing: border-box;
	}
}

/* ========================================
   LAYOUT LAYER
======================================== */
@layer layout {
	body {
		font-family: var(--font-sans), sans-serif;
		line-height: var(--line-height-relaxed);
		color: var(--color-text);
		background: var(--color-surface);
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	.tutorial-header {
		background: var(--color-primary);
		color: white;
		padding: var(--size-6) var(--size-4);
		box-shadow: var(--shadow-2);

		& .container {
			max-width: var(--max-width-content);
			margin: 0 auto;
		}

		& .breadcrumb {
			font-size: var(--font-size-0);
			opacity: 0.9;
			margin-bottom: var(--size-2);

			& a {
				color: white;
				text-decoration: none;

				&:hover {
					text-decoration: underline;
				}
			}
		}

		& h1 {
			font-size: var(--font-size-5);
			font-weight: var(--font-weight-bold);
			line-height: var(--line-height-tight);
		}

		& .header-subtitle {
			color: rgba(255, 255, 255, 0.9);
			margin-top: var(--size-2);
			font-size: var(--font-size-1);
		}
	}

	.tutorial-content {
		flex: 1;
		padding: var(--size-8) var(--size-4);

		& .container {
			max-width: var(--max-width-content);
			margin: 0 auto;
		}
	}

	.tutorial-nav {
		background: var(--color-background);
		border-top: 1px solid var(--color-border);
		padding: var(--size-6) var(--size-4);

		& .container {
			max-width: var(--max-width-content);
			margin: 0 auto;
			display: flex;
			justify-content: space-between;
			gap: var(--size-4);
		}

		& .nav-link {
			flex: 1;
			padding: var(--size-4);
			background: var(--color-gray-50);
			border-radius: var(--radius-3);
			text-decoration: none;
			color: var(--color-text);
			transition: all 150ms ease;

			&:hover {
				background: var(--color-brand-500);
				color: white;
				transform: translateY(-2px);
			}

			& .nav-label {
				font-size: var(--font-size-0);
				opacity: 0.7;
				display: block;
				margin-bottom: var(--size-1);
			}

			& .nav-title {
				font-weight: var(--font-weight-semibold);
			}

			&.next {
				text-align: right;
			}
		}
	}
}

/* ========================================
   TUTORIAL COMPONENTS LAYER
======================================== */
@layer tutorial {
	/* Learning objectives */
	.objectives {
		background: var(--color-gray-100);
		border: 1px solid var(--color-border);
		padding: var(--size-6);
		border-radius: var(--radius-4);
		margin-bottom: var(--size-8);
		border-left: 4px solid var(--color-brand-600);

		& h2 {
			font-size: var(--font-size-3);
			margin-bottom: var(--size-4);
			color: var(--color-text);
		}

		& ul {
			list-style: disc;
			margin-left: var(--size-6);

			& li {
				margin-bottom: var(--size-2);
				color: var(--color-text);
			}
		}
	}

	/* Main content sections */
	/* Initialize counter on container */
	.container {
		counter-reset: topic-counter;
	}

	.container > section {
		background: var(--color-background);
		padding: var(--size-10);
		border-radius: var(--radius-4);
		box-shadow: var(--shadow-2);
		margin-bottom: var(--size-10);

		& h2 {
			font-size: var(--font-size-4);
			font-weight: var(--font-weight-bold);
			margin-bottom: var(--size-6);
			color: var(--color-text);
			border-bottom: 2px solid var(--color-border);
			padding-bottom: var(--size-3);
		}

		/* Auto-number sections with topic-counter class */
		&.topic-counter {
			counter-increment: topic-counter;

			& > h2::before {
				content: counter(topic-counter) ". ";
			}
		}

		& h3 {
			font-size: var(--font-size-3);
			font-weight: var(--font-weight-semibold);
			margin-top: var(--size-10);
			margin-bottom: var(--size-5);
			color: var(--color-gray-700);
		}

		& h4 {
			font-weight: var(--font-weight-semibold);
			color: var(--color-gray-700);
			margin-top: var(--size-8);
			margin-bottom: var(--size-4);
			font-size: var(--font-size-1);
		}

		& p {
			margin-bottom: var(--size-5);
			line-height: var(--line-height-relaxed);

			& code {
				background: var(--color-code-bg);
				padding: var(--size-1) var(--size-2);
				border-radius: var(--radius-2);
				font-family: var(--font-mono), monospace;
				font-size: 0.9em;
				color: var(--color-code-text);
			}
		}

		& ul, & ol {
			margin-bottom: var(--size-6);
			margin-left: var(--size-6);

			& li {
				margin-bottom: var(--size-3);
				line-height: var(--line-height-relaxed);
			}
		}

		/* Add spacing around code blocks and browser windows */
		& code-block {
			margin-top: var(--size-4);
			margin-bottom: var(--size-6);
		}

		& browser-window {
			margin-top: var(--size-4);
			margin-bottom: var(--size-6);
		}

		& aside.note {
			background: #fef3c7;
			border-left: 4px solid #f59e0b;
			padding: var(--size-5);
			margin: var(--size-8) 0;
			border-radius: var(--radius-3);

			& strong {
				display: block;
				margin-bottom: var(--size-3);
				color: #92400e;
			}

			& p {
				margin: 0;
				color: #78350f;
				line-height: var(--line-height-relaxed);
			}
		}

		& aside.tip {
			background: #dcfce7;
			border-left: 4px solid var(--color-brand-500);
			padding: var(--size-5);
			margin: var(--size-8) 0;
			border-radius: var(--radius-3);

			& strong {
				display: block;
				margin-bottom: var(--size-3);
				color: var(--color-brand-700);
			}

			& p {
				margin: 0;
				color: var(--color-brand-700);
				line-height: var(--line-height-relaxed);
			}
		}

		& aside.takeaways {
			background: #d1fae5;
			border-left: 4px solid #10b981;
			padding: var(--size-6);
			border-radius: var(--radius-3);
			margin-top: var(--size-8);

			& h3 {
				color: #065f46;
				margin-bottom: var(--size-4);
				font-size: var(--font-size-3);
			}

			& ul {
				color: #047857;

				& li {
					margin-bottom: var(--size-2);
				}
			}
		}
	}
}

/* ========================================
   DEMO LAYER - Styles being demonstrated
======================================== */
@layer demo {
	/* Styles for demo outputs */
	.demo-output {
		padding: var(--size-6);
		background: white;
		min-height: 6rem;
		border-radius: var(--radius-3);
	}

	/* Universal selector demo */
	.demo-universal * {
		box-sizing: border-box;
	}

	/* Element selector demo */
	.demo-element {
		& p {
			color: #333;
			margin: var(--size-4) 0;
		}
	}

	/* Class selector demo */
	.demo-class {
		& .highlight {
			background-color: yellow;
			padding: var(--size-1) var(--size-2);
		}
	}

	/* ID selector demo */
	.demo-id {
		& #intro {
			font-size: var(--font-size-2);
			font-weight: var(--font-weight-bold);
			border-left: 4px solid blue;
			padding-left: var(--size-4);
		}
	}

	/* Grouping selectors demo */
	.demo-grouping {
		& h1,
		& h2,
		& h3 {
			color: darkblue;
			margin-top: var(--size-4);
		}
	}

	/* Combined selectors demo */
	.demo-combined {
		& p.important {
			background-color: #ffe6e6;
			border: 2px solid red;
			padding: var(--size-4);
			border-radius: var(--radius-2);
		}
	}
}