/**
 * WTE Business Card — Design Tokens (CSS Custom Properties)
 *
 * All design tokens are managed here. Customizer values override
 * these defaults via inline styles in inc/customizer/output.php.
 *
 * @package WTE_Business_Card
 * @since   1.0.0
 */

:root {
	/* ── Base Colors (fixed) ────────────────────────── */
	--wte-white:          #ffffff;
	--wte-gray-50:        #f8f9fa;
	--wte-gray-100:       #f1f3f4;
	--wte-gray-200:       #e8eaed;
	--wte-gray-400:       #9aa0a6;
	--wte-gray-600:       #5f6368;
	--wte-charcoal:       #3c4043;
	--wte-black:          #1a1a1a;

	/* ── Customizer-controlled Colors (defaults) ──── */
	--wte-color-header-bg:       #ffffff;
	--wte-color-header-text:     #1a1a1a;
	--wte-color-footer-bg:       #3c4043;
	--wte-color-footer-text:     #f8f9fa;
	--wte-color-accent:          #2d6be4;
	--wte-color-link:            #2d6be4;
	--wte-color-link-hover:      #1a4fba;
	--wte-color-body-bg:         #ffffff;
	--wte-color-section-alt-bg:  #f8f9fa;

	/* ── Spacing ────────────────────────────────────── */
	--wte-space-xs:   0.25rem;
	--wte-space-sm:   0.5rem;
	--wte-space-md:   1rem;
	--wte-space-lg:   1.5rem;
	--wte-space-xl:   2rem;
	--wte-space-2xl:  3rem;
	--wte-space-3xl:  4rem;
	--wte-space-4xl:  6rem;

	/* ── Typography ─────────────────────────────────── */
	--wte-font-body:          'Noto Sans JP', sans-serif;
	--wte-font-heading:       'Noto Serif JP', serif;
	--wte-font-size-base:     16px;
	--wte-line-height:        1.75;
	--wte-font-weight-normal: 400;
	--wte-font-weight-medium: 500;
	--wte-font-weight-bold:   700;

	/* ── Border & Shadow ────────────────────────────── */
	--wte-radius-sm:   4px;
	--wte-radius-md:   8px;
	--wte-radius-lg:   16px;
	--wte-shadow-sm:   0 1px 3px rgba(0, 0, 0, 0.08);
	--wte-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.10);
	--wte-shadow-lg:   0 8px 30px rgba(0, 0, 0, 0.12);

	/* ── Transition ─────────────────────────────────── */
	--wte-transition-fast:   150ms ease;
	--wte-transition-normal: 250ms ease;
	--wte-transition-slow:   400ms ease;

	/* ── Container ──────────────────────────────────── */
	--wte-container-sm:  640px;
	--wte-container-md:  768px;
	--wte-container-lg:  1024px;
	--wte-container-xl:  1200px;

	/* ── Header ─────────────────────────────────────── */
	--wte-header-height: 72px;
	--wte-logo-width:    200px;

	/* ── Hero ───────────────────────────────────────── */
	--hero-overlay-opacity: 0.4;
	--hero-overlay-color:   #000000;
}