@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 */
	.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);
		}

		&.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);
			}
		}

		& 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: #e8eef3;
			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: #e8eef3;
			border-left: 4px solid var(--color-brand-600);
			padding: var(--size-6);
			border-radius: var(--radius-3);
			margin-top: var(--size-8);

			& h3 {
				color: var(--color-brand-700);
				margin-bottom: var(--size-4);
				margin-top: 0;
				font-size: var(--font-size-3);
			}

			& ul {
				color: var(--color-brand-700);

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

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

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

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

		/* Tables */
		& table {
			width: 100%;
			border-collapse: collapse;
			margin: var(--size-6) 0;
			font-size: var(--font-size-0);
		}

		& th, & td {
			border: 1px solid var(--color-border);
			padding: var(--size-3) var(--size-4);
			text-align: left;
		}

		& th {
			background: var(--color-brand-600);
			color: white;
			font-weight: var(--font-weight-semibold);
		}

		& tr:nth-child(even) {
			background: var(--color-gray-50);
		}

		/* Diagrams */
		& .diagram {
			background: var(--color-gray-800);
			color: #0f0;
			padding: var(--size-6);
			border-radius: var(--radius-3);
			font-family: var(--font-mono), monospace;
			white-space: pre;
			overflow-x: auto;
			font-size: 0.8125rem;
			line-height: 1.4;
			margin: var(--size-6) 0;
		}

		/* Blockquotes */
		& blockquote {
			border-left: 4px solid var(--color-brand-600);
			margin: var(--size-6) 0;
			padding: var(--size-4) var(--size-6);
			background: var(--color-gray-50);
			font-style: italic;
		}
	}

	/* Takeaways at container level (outside sections) */
	.container > aside.takeaways {
		background: #e8eef3;
		border-left: 4px solid var(--color-brand-600);
		padding: var(--size-6);
		border-radius: var(--radius-3);
		margin-top: var(--size-8);
		margin-bottom: var(--size-10);

		& h3 {
			color: var(--color-brand-700);
			margin-bottom: var(--size-4);
			margin-top: 0;
			font-size: var(--font-size-3);
		}

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

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

	/* Inline code in list items */
	li 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);
	}

	/* Mark element */
	mark {
		background: #fef3c7;
		padding: 0.125em 0.25em;
		border-radius: var(--radius-1);
	}

	/* Links */
	a {
		color: var(--color-brand-600);
	}
}

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