/* ==========================================================================
   Design tokens — docs/04 §2–§4, docs/11 §3.
   COLOR VALUES LIVE IN THIS FILE ONLY. Other files use var(--c-…). No pink.
   Breakpoints (vars can't be used in @media): sm 375 · md 768 · lg 1024 · xl 1440.
   ========================================================================== */

:root {
	/* --- Color --- */
	--c-primary: #00479D;       /* Brand blue: buttons, links, emphasis, CTA band */
	--c-primary-dark: #002A5C;  /* Deep navy: footer, primary hover */
	--c-primary-rgb: 0, 71, 157;
	--c-surface: #EAF1FA;       /* Light blue: service / summary section background */
	--c-bg-alt: #F6F8FA;        /* Off-white: alternating section background */
	--c-bg-alt-hover: #EEF1F5;  /* FAQ question row (hover) */
	--c-bg: #FFFFFF;
	--c-drawer-bg: #F9F9F9;     /* Mobile menu (Figma "Menu") */
	--c-toc-bg: #F9F9F9;        /* 目次 box (Figma /news/article-title) */
	--c-text: #0C1117;          /* Figma v3: body / heading text */
	--c-text-muted: #5E6B78;
	--c-text-subtle: #9EA6AE;   /* 「主な支援内容」 label (Figma /improvement) */
	--c-text-black: #000000;    /* PHILOSOPHY body copy (Figma /company) */
	--c-border: #DDE3EA;
	--c-checkbox: #1E2A38;      /* Consent checkbox outline (Figma /contact) */
	--c-border-light: #EEEEEE;  /* 会社概要 row rules (Figma /company) */
	--c-accent-gold: #B8945A;   /* ONLY on --c-primary-dark, or as a decorative rule (D-16) */
	--c-error: #BA3F41;         /* Form error border + message (Figma 「/contact - bản error」) */
	--c-on-dark: #FFFFFF;       /* Text on primary / primary-dark */
	--c-on-dark-muted: rgba(255, 255, 255, 0.72);
	--c-on-dark-soft: #DDE3EA;  /* Mobile footer copyright */
	--c-on-dark-line: rgba(255, 255, 255, 0.1);
	--c-on-dark-hover: rgba(255, 255, 255, 0.2);       /* Service card arrow (hover) */
	--c-shade-hover: rgba(0, 0, 0, 0.2);              /* Darkens blue cards on hover */
	--c-shade-hover-strong: rgba(0, 0, 0, 0.4);       /* Darkens navy cards on hover */
	--c-header-bg: #FFFFFF;                           /* Header: solid white (no transparency) */

	/* --- Font --- */
	--font-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
	/* Latin headings / numbers — pending D-05. Keep in sync with ZENWORTH_FONTS_URL (inc/enqueue.php). */
	--font-en: "Geologica", "Montserrat", var(--font-ja);

	/* --- Font size (Figma v3 text styles: H1 / H2 / Paragraph; 375px → 1440px) --- */
	--fs-display: clamp(28px, 8.533vw, 44px);              /* H1 hero: 32 @375, 48 from 1024 */
	--fs-h1: clamp(24px, 19.77px + 1.127vw, 36px);
	--fs-h2: clamp(28px, 25.69px + 0.616vw, 32px);         /* H2 section title: 28 @375 → 32 @1024+ */
	--fs-h3: clamp(18px, 17.3px + 0.188vw, 20px);
	--fs-body: 1rem;            /* 16px mobile / 17px desktop (html font-size) */
	--fs-text: 14px;            /* Paragraph */
	--fs-small: 14px;
	--fs-xs: 13px;
	--fs-eyebrow: 12px;         /* CHALLENGES / APPROACH / …: 12 mobile, 14 desktop */

	--lh-body: 1.6;
	--lh-text: 1.6;
	--lh-heading: 1.6;
	--ls-body: 0;
	--ls-heading: 0;
	--ls-eyebrow: 0.16em;       /* 2.24px @14px */

	/* --- Spacing (8pt) --- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-30: 120px;
	--space-32: 128px;
	--section-space: var(--space-16);  /* White sections: 64 mobile → 80 desktop (stacked = 128 / 160) */
	--band-space: var(--space-16);     /* Colored bands: 64 mobile → 120 desktop */
	--head-gap: var(--space-12);       /* Section head → content: 48 mobile → 64 desktop */

	/* --- Layout --- */
	--container-max: 1140px;
	--container-narrow: 780px;
	--container-article: 900px; /* Long text column (Figma 「/privacy-policy」) */
	--container-padding: clamp(20px, 10.6vw, 40px); /* 40px @375 like the comp, never < 20px */
	--card-gutter: 12px;        /* Mobile cards bleed to 12px from the screen edge */
	--header-h: 66px;
	--header-padding: 24px;
	--admin-bar-h: var(--wp-admin--admin-bar--height, 0px);

	/* --- Shape --- */
	--radius-sm: 4px;           /* Buttons */
	--radius-md: 10px;          /* Cards */
	--shadow-subtle: 0 4px 20px rgba(var(--c-primary-rgb), 0.05);
	--shadow-hover: 0 8px 30px rgba(var(--c-primary-rgb), 0.12);
	--tap-min: 44px;

	/* --- Motion (P6: ≤ 400ms) --- */
	--transition-fast: 0.2s ease;
	--transition-base: 0.3s ease;
	--transition-smooth: 0.4s cubic-bezier(0.16, 1, 0.3, 1);

	/* Scroll reveal ([data-reveal], components.css + main.js). Change motion site-wide HERE. */
	--reveal-distance: 16px;                       /* Slide-up distance */
	--reveal-duration: 0.4s;                       /* Fade/slide duration */
	--reveal-easing: cubic-bezier(0.16, 1, 0.3, 1);
	--reveal-stagger: 0ms;                         /* Delay between blocks revealed together. 0ms = all at once (current choice, like the original TOP); e.g. 80ms = one after another */

	/* --- Layers --- */
	--z-header: 100;
	--z-skip: 200;
}

@media (min-width: 768px) {
	:root {
		--container-padding: 40px;
		--card-gutter: var(--container-padding);
	}
}

@media (min-width: 1024px) {
	:root {
		--fs-display: 48px;
		--fs-eyebrow: 14px;
		--section-space: var(--space-20);
		--band-space: var(--space-30);
		--head-gap: var(--space-16);
		--header-h: 96px;
		--header-padding: 40px;
	}
}