/* VirtualLab design tokens — loaded site-wide, consumed by the theme and education plugin */

:root {
	/* Brand palette */
	--vl-primary:        #1E3A8A;   /* Deep Indigo — simulation depth */
	--vl-primary-600:    #1D3178;
	--vl-primary-500:    #2A4BA8;
	--vl-primary-100:    #DBEAFE;
	--vl-primary-050:    #EEF2FF;

	--vl-accent:         #0EA5B7;   /* Cyan-Teal — data/AI velocity */
	--vl-accent-600:     #0C8F9F;
	--vl-accent-500:     #14B8CA;
	--vl-accent-100:     #CFFAFE;
	--vl-accent-050:     #ECFEFF;

	/* Neutrals (5-step scale) */
	--vl-ink:            #0F172A;
	--vl-ink-700:        #1E293B;
	--vl-muted:          #64748B;
	--vl-border:         #E2E8F0;
	--vl-bg-soft:        #F8FAFC;
	--vl-bg:             #FFFFFF;

	/* Semantic */
	--vl-success:        #059669;
	--vl-warning:        #D97706;
	--vl-danger:         #DC2626;

	/* Typography */
	--vl-font-sans: "Pretendard Variable", "Pretendard", "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
	--vl-font-display: "Pretendard Variable", "Pretendard", "Inter", "Noto Sans KR", sans-serif;
	--vl-font-mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, Consolas, monospace;

	--vl-fs-xs:   12px;
	--vl-fs-sm:   14px;
	--vl-fs-base: 16px;
	--vl-fs-md:   18px;
	--vl-fs-lg:   20px;
	--vl-fs-xl:   24px;
	--vl-fs-2xl:  32px;
	--vl-fs-3xl:  40px;
	--vl-fs-4xl:  56px;
	--vl-fs-5xl:  72px;

	--vl-lh-tight: 1.2;
	--vl-lh-snug:  1.35;
	--vl-lh-normal: 1.55;
	--vl-lh-relaxed: 1.7;

	--vl-fw-regular: 400;
	--vl-fw-medium:  500;
	--vl-fw-semibold: 600;
	--vl-fw-bold:    700;
	--vl-fw-black:   800;

	/* Radius */
	--vl-radius-sm: 6px;
	--vl-radius:    10px;
	--vl-radius-lg: 16px;
	--vl-radius-xl: 24px;
	--vl-radius-pill: 999px;

	/* Elevation */
	--vl-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
	--vl-shadow:    0 6px 20px rgba(15, 23, 42, .08);
	--vl-shadow-lg: 0 20px 50px rgba(15, 23, 42, .12);

	/* Spacing scale (4px grid) */
	--vl-sp-1:  4px;
	--vl-sp-2:  8px;
	--vl-sp-3:  12px;
	--vl-sp-4:  16px;
	--vl-sp-5:  24px;
	--vl-sp-6:  32px;
	--vl-sp-7:  48px;
	--vl-sp-8:  64px;
	--vl-sp-9:  96px;
	--vl-sp-10: 128px;

	/* Container */
	--vl-container: 1200px;
	--vl-container-wide: 1360px;

	/* Motion */
	--vl-ease: cubic-bezier(.4, 0, .2, 1);
}

/* Typography base */
html { scroll-behavior: smooth; }
body,
.entry-content {
	font-family: var(--vl-font-sans);
	color: var(--vl-ink);
	line-height: var(--vl-lh-normal);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--vl-font-display);
	color: var(--vl-ink);
	font-weight: var(--vl-fw-bold);
	line-height: var(--vl-lh-tight);
	letter-spacing: -0.01em;
}

/* Utility: section container */
.vl-container {
	width: min(100%, var(--vl-container));
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
	box-sizing: border-box;
}
.vl-container--wide {
	max-width: var(--vl-container-wide);
}

/* Section spacing */
.vl-section {
	padding-block: clamp(48px, 8vw, 96px);
}
.vl-section--soft { background: var(--vl-bg-soft); }
.vl-section--ink  { background: var(--vl-ink); color: #fff; }
.vl-section--ink h1,
.vl-section--ink h2,
.vl-section--ink h3 { color: #fff; }

/* Eyebrow */
.vl-eyebrow {
	display: inline-block;
	font-size: var(--vl-fs-sm);
	font-weight: var(--vl-fw-semibold);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--vl-accent);
	margin-bottom: var(--vl-sp-3);
}

/* Headline scale */
.vl-h-hero {
	font-size: clamp(40px, 6vw, var(--vl-fs-5xl));
	font-weight: var(--vl-fw-black);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.vl-h-section {
	font-size: clamp(28px, 4vw, var(--vl-fs-3xl));
	font-weight: var(--vl-fw-bold);
	letter-spacing: -0.015em;
}
.vl-h-card {
	font-size: var(--vl-fs-xl);
	font-weight: var(--vl-fw-bold);
}
.vl-text-lead {
	font-size: clamp(16px, 1.4vw, var(--vl-fs-lg));
	color: var(--vl-muted);
	line-height: var(--vl-lh-relaxed);
}

/* Buttons */
.vl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vl-sp-2);
	padding: 14px 22px;
	border-radius: var(--vl-radius);
	font-family: inherit;
	font-size: var(--vl-fs-base);
	font-weight: var(--vl-fw-semibold);
	line-height: 1;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .18s var(--vl-ease), transform .18s var(--vl-ease), box-shadow .18s var(--vl-ease), color .18s var(--vl-ease), border-color .18s var(--vl-ease);
	text-decoration: none;
}
.vl-btn:focus-visible {
	outline: 3px solid var(--vl-accent);
	outline-offset: 2px;
}
.vl-btn-primary {
	background: var(--vl-primary);
	color: #fff;
}
.vl-btn-primary:hover {
	background: var(--vl-primary-600);
	color: #fff;
	box-shadow: var(--vl-shadow);
}
.vl-btn-ghost {
	background: transparent;
	color: var(--vl-primary);
	border-color: var(--vl-border);
}
.vl-btn-ghost:hover {
	background: var(--vl-bg-soft);
	border-color: var(--vl-primary);
	color: var(--vl-primary);
}
.vl-btn-accent {
	background: var(--vl-accent);
	color: #fff;
}
.vl-btn-accent:hover {
	background: var(--vl-accent-600);
	color: #fff;
}
.vl-btn-inline {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--vl-primary);
	font-weight: var(--vl-fw-semibold);
}
.vl-btn-inline::after {
	content: "→";
	transition: transform .18s var(--vl-ease);
}
.vl-btn-inline:hover::after { transform: translateX(3px); }
.vl-btn-lg { padding: 18px 28px; font-size: var(--vl-fs-md); }

/* Card */
.vl-card {
	background: var(--vl-bg);
	border: 1px solid var(--vl-border);
	border-radius: var(--vl-radius-lg);
	padding: clamp(20px, 3vw, 32px);
	transition: transform .18s var(--vl-ease), box-shadow .18s var(--vl-ease), border-color .18s var(--vl-ease);
}
.vl-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--vl-shadow);
	border-color: transparent;
}

/* Pill / badge */
.vl-pill {
	display: inline-flex;
	align-items: center;
	gap: var(--vl-sp-1);
	padding: 4px 12px;
	border-radius: var(--vl-radius-pill);
	background: var(--vl-primary-050);
	color: var(--vl-primary);
	font-size: var(--vl-fs-xs);
	font-weight: var(--vl-fw-semibold);
	letter-spacing: 0.02em;
}
.vl-pill--accent { background: var(--vl-accent-050); color: var(--vl-accent-600); }
.vl-pill--muted  { background: var(--vl-border); color: var(--vl-ink-700); }

/* Grid utilities */
.vl-grid { display: grid; gap: var(--vl-sp-5); }
.vl-grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vl-grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.vl-grid--4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Links */
a {
	color: var(--vl-primary);
	text-underline-offset: 3px;
}
a:hover { color: var(--vl-primary-600); }

/* Focus ring */
:focus-visible {
	outline: 2px solid var(--vl-accent);
	outline-offset: 2px;
}

/* Skip link helper for accessibility */
.screen-reader-text { position: absolute !important; clip: rect(1px,1px,1px,1px); width:1px; height:1px; overflow:hidden; }

/* Gentle print */
@media print {
	.vl-btn { display: none; }
}