/*
 * SHOWTHINGS design tokens (rebrand, dark-only)
 * Source: Figma "showthings" > 02 / SHOWTHINGS · Design System
 *         Variables: SHOWTHINGS / Color, Size, Responsive
 * Status: prepared only. Not enqueued yet; the live theme still uses the legacy light tokens in style.css.
 * Prefix --st-* so it can coexist with the legacy variables during migration.
 */

:root {
	/* Color (only this palette) */
	--st-color-canvas: #0a0a0a;            /* page background */
	--st-color-surface: #121212;           /* card surface */
	--st-color-raised: #1c1c1c;            /* raised surface, inputs, disabled fill */
	--st-color-brand: #ff4b0f;             /* action colour; text on it is always white */
	--st-color-on-brand: #ffffff;
	--st-color-text: #f5f5f5;
	--st-color-text-secondary: #cccccc;
	--st-color-text-muted: #a0a0a0;
	--st-color-border-decorative: #303030; /* dividers, card outlines */
	--st-color-border-control: #737373;    /* input/button outlines, disabled text */

	/* Typography */
	--st-font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;

	--st-type-display-size: 64px;  --st-type-display-weight: 800;
	--st-type-h1-size: 48px;       --st-type-h1-weight: 800;
	--st-type-h2-size: 32px;       --st-type-h2-weight: 750;
	--st-type-h3-size: 24px;       --st-type-h3-weight: 700;
	--st-type-h4-size: 20px;       --st-type-h4-weight: 650;
	--st-type-lead-size: 20px;     --st-type-lead-weight: 400;
	--st-type-body-size: 18px;     --st-type-body-weight: 400;
	--st-type-ui-size: 14px;       --st-type-ui-weight: 600;
	--st-type-caption-size: 13px;  --st-type-caption-weight: 450;
	--st-type-label-size: 11px;    --st-type-label-weight: 700;

	/* Spacing scale */
	--st-space-4: 4px;   --st-space-8: 8px;   --st-space-12: 12px; --st-space-16: 16px;
	--st-space-20: 20px; --st-space-24: 24px; --st-space-32: 32px; --st-space-40: 40px;
	--st-space-48: 48px; --st-space-64: 64px; --st-space-80: 80px; --st-space-96: 96px;

	/* Radius */
	--st-radius-sm: 4px;   /* small */
	--st-radius-md: 12px;  /* controls, media */
	--st-radius-lg: 24px;  /* modal */

	/* Layout */
	--st-container: 1280px;
	--st-reading: 720px;
	--st-sidebar: 280px;
	--st-grid-columns: 12;
	--st-grid-gap: 24px;
	--st-page-padding: 40px;
	--st-header-height: 80px;
	--st-drawer-width: 360px;

	/* Controls & accessibility */
	--st-icon-size: 24px;
	--st-tap-min: 44px;
	--st-button-sm: 44px;
	--st-button-md: 48px;
	--st-button-lg: 56px;
	--st-focus-ring: 2px solid var(--st-color-text);
	--st-focus-offset: 3px;
	--st-progress-height: 3px;
}

/* Tablet */
@media (max-width: 1023px) {
	:root {
		--st-page-padding: 24px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	:root {
		--st-type-display-size: 40px;
		--st-type-h1-size: 32px;
		--st-type-h2-size: 26px;
		--st-type-h3-size: 22px;
		--st-type-h4-size: 18px;
		--st-type-lead-size: 18px;
		--st-type-body-size: 17px;

		--st-grid-columns: 4;
		--st-grid-gap: 16px;
		--st-page-padding: 20px;
		--st-header-height: 64px;
	}
}