/**
 * Design-system tokens for Tokyo Studio Capture.
 *
 * Phase 1B: foundation only. Defines the approved Phase 1A custom properties
 * as inert CSS variables -- nothing here is applied to real selectors yet
 * (no `body { font-family: ... }`, no component restyling). Existing visual
 * output is unaffected until later phases start consuming these tokens.
 *
 * Enqueued before woocommerce.css / audioigniter.css / forms.css /
 * site-fixes.css (see astra-child/functions.php -> tsc_enqueue_assets()) so
 * those files can reference var(--tsc-*) safely.
 */

:root {

	/* ---- Color: dark surface set (default) ---- */
	--tsc-bg: #0B0B0C;
	--tsc-surface: #141416;
	--tsc-surface-raised: #1C1C1F;
	--tsc-border: #2A2A2E;
	--tsc-text: #F5F4F2;
	--tsc-text-muted: #9B9B9F;
	--tsc-accent: #C19A83;
	--tsc-accent-hover: #A8846F;
	--tsc-text-on-accent: #16161A;

	/* ---- Color: light surface set (shop / forms / long-form content) ---- */
	--tsc-bg-light: #FAFAF9;
	--tsc-surface-light: #FFFFFF;
	--tsc-border-light: #E4E2DF;
	--tsc-text-light: #16161A;
	--tsc-text-muted-light: #6B6B70;

	/* ---- Typography: families ---- */
	--tsc-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--tsc-font-display: 'Inter Display', var(--tsc-font-body);

	/* ---- Typography: sizes ---- */
	--tsc-fs-display: clamp(2.5rem, 5vw, 4.5rem);
	--tsc-fs-h2: clamp(1.75rem, 3vw, 2.5rem);
	--tsc-fs-product: 1.0625rem;
	--tsc-fs-body: 1rem;
	--tsc-fs-caption: 0.8125rem;
	--tsc-fs-price: 1.125rem;

	/* ---- Typography: line-heights ---- */
	--tsc-lh-tight: 1.1;
	--tsc-lh-heading: 1.25;
	--tsc-lh-body: 1.65;

	/* ---- Spacing: base-4 scale ---- */
	--tsc-space-1: 4px;
	--tsc-space-2: 8px;
	--tsc-space-3: 12px;
	--tsc-space-4: 16px;
	--tsc-space-5: 24px;
	--tsc-space-6: 32px;
	--tsc-space-7: 48px;
	--tsc-space-8: 64px;
	--tsc-space-9: 96px;
	--tsc-space-10: 128px;

	/* ---- Radius ---- */
	--tsc-radius-sm: 4px;
	--tsc-radius-md: 8px;
	--tsc-radius-lg: 12px;

	/* ---- Layout: content widths ---- */
	--tsc-content-width: 1240px;
	--tsc-content-width-wide: 1440px;
	--tsc-content-width-narrow: 760px;
	/* Phase 5B: formalizes a ~1000px value already used informally as a
	   literal in a few places (Reviews, Technical Notes) -- added here for
	   the Phase 5B static-page system (TSC Rack Overview/Feature Highlights
	   width), not a retroactive replacement of the narrow 760px prose width
	   used for actual reading columns (About/NAM Guide body text). */
	--tsc-content-width-medium: 1000px;
}

/* Mobile: redefine the wider spacing steps once, rather than overriding
   every rule that consumes them individually. Inert until component CSS
   actually uses --tsc-space-7 through --tsc-space-10. */
@media (max-width: 767px) {
	:root {
		--tsc-space-7: 20px;
		--tsc-space-8: 24px;
		--tsc-space-9: 48px;
		--tsc-space-10: 64px;
	}
}

/**
 * Self-hosted font architecture. All four files below are installed and
 * verified (Phase 1B.2 / 1B.3): extracted from the official rsms/inter
 * GitHub release v4.1, genuine WOFF2, byte-identical to the release
 * archive. Everything here stays entirely within the official rsms/inter
 * distribution -- no Google-hosted or third-party font files anywhere.
 *
 *   - Inter: one variable woff2 covers every approved weight (400 body,
 *     500 captions, 600 nav/product/price/button), plus 700 as headroom
 *     for inline emphasis (<strong>), not yet used.
 *   - Inter Display: rsms/inter does not ship this as a variable font in
 *     v4.1, only static per-weight files, so the two approved weights
 *     (600 section headings, 700 hero/display) are two separate @font-face
 *     rules on the same family name rather than one variable file.
 *
 * IMPORTANT: the font-weight values declared below describe what each file
 * actually contains -- they do not, by themselves, enforce where a family
 * may be used. The real design-system rule is usage-based: only approved
 * display/heading selectors may reference var(--tsc-font-display). Do not
 * broaden that usage later without a deliberate decision.
 */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('../fonts/InterVariable.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter Display';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/InterDisplay-SemiBold.woff2') format('woff2');
}

@font-face {
	font-family: 'Inter Display';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/InterDisplay-Bold.woff2') format('woff2');
}