/**
 * MAIN STYLESHEET
 * john-trinh.com
 *
 * Design tokens chosen via interactive playgrounds:
 * - Fonts: Space Grotesk + Karla (Google Fonts)
 * - Colors: Hyper Pink (neon magenta accent)
 *
 * Philosophy: Semantic HTML with minimal classes.
 * Most elements styled globally - add classes only when needed.
 */

/* ============================================
   DESIGN TOKENS (CSS Custom Properties)
   Change these to update the entire site
   ============================================ */
:root {
	/* COLORS - Hyper Pink palette */
	--color-background: #ffffff;
	--color-text: #0a0a0a;
	--color-accent: #ff0080;        /* Neon magenta - links, highlights */
	--color-muted: #666666;         /* Secondary text, metadata */
	--color-surface: #fff0f7;       /* Cards, code blocks, containers */

	/* FONTS - Space Grotesk + Karla + Space Mono */
	--font-heading: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-body: 'Karla', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-mono: 'Space Mono', 'SF Mono', Monaco, monospace;

	/* SPACING SCALE - Consistent rhythm throughout site */
	--space-xs: 0.5rem;     /* 8px */
	--space-s: 1rem;        /* 16px */
	--space-m: 2rem;        /* 32px */
	--space-l: 4rem;        /* 64px */
	--space-xl: 8rem;       /* 128px */

	/* TYPOGRAPHY SCALE */
	--text-xs: 0.875rem;    /* 14px - small text, metadata */
	--text-s: 1rem;         /* 16px - body text */
	--text-m: 1.125rem;     /* 18px - large body */
	--text-l: 1.5rem;       /* 24px - h3 */
	--text-xl: 2rem;        /* 32px - h2 */
	--text-2xl: 3rem;       /* 48px - h1 */

	/* LAYOUT */
	--container-width: 65ch;  /* Optimal reading width */
	--container-padding: var(--space-m);
}

/* ============================================
   RESET & BASE STYLES
   Normalize browser defaults
   ============================================ */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	/* Prevents text size adjustment on iOS orientation change */
	-webkit-text-size-adjust: 100%;
}

body {
	/* Base text styles */
	font-family: var(--font-body);
	font-size: var(--text-s);
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-background);

	/* Better font rendering */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* ============================================
   TYPOGRAPHY
   All heading and text styles
   ============================================ */

/* Headings use Space Grotesk */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	line-height: 1.2;
	font-weight: 700;
	margin-bottom: var(--space-s);
}

h1 {
	font-size: var(--text-2xl);
	margin-bottom: var(--space-xs);
}

h2 {
	font-size: var(--text-xl);
	margin-top: var(--space-l);
}

h3 {
	font-size: var(--text-l);
	margin-top: var(--space-m);
}

/* Body text uses Karla */
p {
	margin-bottom: var(--space-s);
}

/* Emphasis */
strong {
	font-weight: 600;
}

em {
	font-style: italic;
}

/* Small text (metadata, timestamps, etc.) */
small {
	font-size: var(--text-xs);
	color: var(--color-muted);
}

/* ============================================
   LINKS
   Hyper pink accent with underline
   ============================================ */
a {
	color: var(--color-accent);
	text-decoration: none;
	border-bottom: 1px solid var(--color-accent);
	transition: border-bottom-width 0.15s ease;
}

a:hover,
a:focus {
	border-bottom-width: 2px;
}

/* Remove underline from navigation links (handled separately) */
nav a {
	border-bottom: none;
}

nav a:hover {
	color: var(--color-accent);
}

/* ============================================
   LISTS
   Consistent spacing and alignment
   ============================================ */
ul, ol {
	margin: var(--space-s) 0;
	padding-left: var(--space-m);
}

li {
	margin-bottom: var(--space-xs);
}

/* Remove default list styling when in nav */
nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* ============================================
   CODE & PREFORMATTED TEXT
   Space Mono for technical content
   ============================================ */
code, pre {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

/* Inline code */
code {
	background: var(--color-surface);
	padding: 0.2rem 0.4rem;
	border-radius: 3px;
}

/* Code blocks */
pre {
	background: var(--color-surface);
	padding: var(--space-s);
	border-radius: 6px;
	overflow-x: auto;
	margin: var(--space-s) 0;
}

pre code {
	background: none;
	padding: 0;
}

/* ============================================
   IMAGES & MEDIA
   Responsive by default
   ============================================ */
img, video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Figures (auto-generated by markdown-it-implicit-figures) */
figure {
	margin: var(--space-m) 0;
}

figcaption {
	font-size: var(--text-xs);
	color: var(--color-muted);
	margin-top: var(--space-xs);
	text-align: center;
}

/* ============================================
   LAYOUT CONTAINERS
   Max-width centered containers
   ============================================ */
main {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--container-padding);
}

/* ============================================
   HEADER
   Site navigation
   ============================================ */
header {
	max-width: var(--container-width);
	margin: 0 auto;
	padding: var(--space-m) var(--container-padding);
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header h1 {
	font-size: var(--text-l);
	margin: 0;
}

header nav ul {
	display: flex;
	gap: var(--space-s);
}

header nav li {
	margin: 0;
}

/* ============================================
   FOOTER
   Copyright and git info
   ============================================ */
footer {
	max-width: var(--container-width);
	margin: var(--space-xl) auto 0;
	padding: var(--space-m) var(--container-padding);
	border-top: 1px solid var(--color-surface);
	font-size: var(--text-xs);
	color: var(--color-muted);
}

footer a {
	color: var(--color-muted);
}

footer a:hover {
	color: var(--color-accent);
}

/* GitHub icon in footer */
footer svg {
	width: 1em;
	height: 1em;
	vertical-align: middle;
	fill: currentColor;
}

/* ============================================
   HOMEPAGE & CATEGORY PAGES
   Intro text and category navigation
   ============================================ */

/* Tagline under main heading on homepage */
.tagline {
	font-size: var(--text-m);
	color: var(--color-muted);
	margin-bottom: var(--space-m);
}

/* Category filter navigation */
main > nav {
	margin: var(--space-m) 0;
	padding-bottom: var(--space-m);
	border-bottom: 1px solid var(--color-surface);
}

main > nav a {
	margin-right: var(--space-s);
	padding: var(--space-xs) var(--space-s);
	border-radius: 4px;
	transition: background 0.15s ease;
}

main > nav a:hover {
	background: var(--color-surface);
}

/* ============================================
   ARTIFACT LISTINGS
   Grid of portfolio items
   ============================================ */
ul {
	/* Default list styling already defined above */
}

/* When list contains artifact thumbnails */
li img {
	margin-bottom: var(--space-xs);
	border-radius: 4px;
}

/* ============================================
   DEV HUD (banners for dev/beta/draft modes)
   Sticky warnings at top of page
   ============================================ */
.dev-hud {
	position: sticky;
	top: 0;
	z-index: 1000;
	padding: var(--space-xs);
	text-align: center;
	font-size: var(--text-xs);
	font-weight: 600;
	border-bottom: 2px solid;
}

/* Different colors for different warning types */
.dev-hud[data-mode="dev"] {
	background: #fef3c7;
	border-color: #fbbf24;
	color: #92400e;
}

.dev-hud[data-mode="beta"] {
	background: #fed7aa;
	border-color: #fb923c;
	color: #7c2d12;
}

.dev-hud[data-mode="draft"] {
	background: #e5e7eb;
	border-color: #9ca3af;
	color: #1f2937;
}

/* ============================================
   UTILITY CLASSES
   Minimal - only add when semantic HTML isn't enough
   ============================================ */

/* Center text */
.text-center {
	text-align: center;
}

/* Muted text color */
.muted {
	color: var(--color-muted);
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   Mobile-first approach
   ============================================ */

/* Tablets and up */
@media (min-width: 768px) {
	:root {
		--text-2xl: 4rem;  /* Bigger h1 on larger screens */
	}
}

/* Desktop and up */
@media (min-width: 1024px) {
	:root {
		--space-l: 6rem;   /* More breathing room */
	}
}