/*
 * Tax Accountant Theme - Design System v3 (Louvre Revamp)
 *
 * New token layer for the v2 visual revamp inspired by the Louvre website.
 * All tokens are namespaced under `--v3-*` and utility classes under `.v3-*`
 * so that this layer adds on top of v1/v2 CSS without overriding existing
 * selectors. Front-page/underlying layout changes land in later sprints
 * (Sprint 2+); this file only establishes the base.
 *
 * - v1 (style.css) and v2 (design-system-v2.css, front-page-v2.css, etc.)
 *   are left untouched.
 * - No `body`, `h1..h6`, or other bare element selectors are styled here to
 *   avoid regressions. Apply `.v3-*` utilities where needed in Sprint 2+.
 *
 * @package Tax_Accountant
 * @version 3.0.0 (Sprint 1 - Tokens & Foundations)
 */

/* ========================================
 * v3 Design Tokens
 * ======================================== */
:root {
	/* ---- Colors (Neutral-first palette with limited gold/navy accents) ---- */
	--v3-bg: #F8F6F1;            /* off-white canvas */
	--v3-bg-paper: #FFFFFF;      /* card / paper surface */
	--v3-bg-dark: #1A1A1A;       /* reversed sections / footer */
	--v3-ink: #1A1A1A;           /* body text */
	--v3-ink-inverse: #F8F6F1;   /* text on dark */
	--v3-muted: #6B6B6B;         /* caption, meta */
	--v3-line: #E5E0D5;          /* hairline rule on off-white */
	--v3-gold: #B89968;          /* CTA / accent gold */
	--v3-gold-dark: #927544;     /* gold hover */
	--v3-gold-soft: rgba(184, 153, 104, 0.18); /* gold tint bg */
	--v3-navy: #1B3A5C;          /* heritage navy (used sparingly as formal mark) */

	/* ---- Typography ---- */
	--v3-font-serif: "Noto Serif JP", "Cormorant Garamond", "Times New Roman", "YuMincho", "Hiragino Mincho ProN", serif;
	--v3-font-sans:  "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;

	/* Font weights */
	--v3-weight-regular: 400;
	--v3-weight-medium: 500;
	--v3-weight-bold: 700;

	/* Type scale (desktop-first, editorial) */
	--v3-fs-h1: clamp(40px, 5.6vw, 72px);
	--v3-fs-h2: clamp(32px, 3.6vw, 48px);
	--v3-fs-h3: clamp(24px, 2.4vw, 32px);
	--v3-fs-h4: 22px;
	--v3-fs-h5: 18px;
	--v3-fs-h6: 16px;
	--v3-fs-body: 16px;
	--v3-fs-lead: 18px;
	--v3-fs-caption: 13px;
	--v3-fs-meta: 12px;

	/* Line heights */
	--v3-lh-display: 1.2;
	--v3-lh-heading: 1.3;
	--v3-lh-body: 1.8;
	--v3-lh-tight: 1.4;

	/* Letter spacing */
	--v3-ls-meta: 0.18em;   /* for all-caps meta labels */
	--v3-ls-heading: 0.02em;
	--v3-ls-body: 0.01em;

	/* ---- Spacing scale (4px base) ---- */
	--v3-space-0: 0;
	--v3-space-1: 4px;
	--v3-space-2: 8px;
	--v3-space-3: 12px;
	--v3-space-4: 16px;
	--v3-space-5: 24px;
	--v3-space-6: 32px;
	--v3-space-7: 48px;
	--v3-space-8: 64px;
	--v3-space-9: 80px;
	--v3-space-10: 96px;
	--v3-space-11: 120px;
	--v3-space-12: 160px;

	/* Section vertical rhythm (120-160px on desktop) */
	--v3-section-y: 120px;
	--v3-section-y-lg: 160px;

	/* Container widths */
	--v3-container-max: 1280px;
	--v3-container-narrow: 960px;
	--v3-container-prose: 720px;
	--v3-gutter: 24px;

	/* ---- Rules (hairline borders) ---- */
	--v3-rule-width: 1px;
	--v3-rule-color: var(--v3-line);
	--v3-rule: var(--v3-rule-width) solid var(--v3-rule-color);
	--v3-rule-gold: var(--v3-rule-width) solid var(--v3-gold);

	/* ---- Motion ---- */
	--v3-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--v3-dur-fast: 200ms;
	--v3-dur-base: 400ms;
	--v3-dur-slow: 700ms;

	/* ---- Focus ring (WCAG AA) ---- */
	--v3-focus-ring: 2px solid var(--v3-gold);
	--v3-focus-offset: 3px;

	/* ---- Z-index scale (namespaced) ---- */
	--v3-z-base: 1;
	--v3-z-raised: 10;
	--v3-z-overlay: 100;
	--v3-z-modal: 1000;
}

/* ========================================
 * v3 Utility Classes (namespaced; opt-in)
 * ======================================== */

/* ---- Typography utilities ---- */
.v3-serif {
	font-family: var(--v3-font-serif);
	font-weight: var(--v3-weight-bold);
	letter-spacing: var(--v3-ls-heading);
	line-height: var(--v3-lh-display);
}

.v3-sans {
	font-family: var(--v3-font-sans);
	letter-spacing: var(--v3-ls-body);
	line-height: var(--v3-lh-body);
}

.v3-heading-serif {
	font-family: var(--v3-font-serif);
	font-weight: var(--v3-weight-bold);
	color: var(--v3-ink);
	line-height: var(--v3-lh-display);
	letter-spacing: var(--v3-ls-heading);
	margin: 0 0 var(--v3-space-5);
}

.v3-h1 { font-size: var(--v3-fs-h1); }
.v3-h2 { font-size: var(--v3-fs-h2); }
.v3-h3 { font-size: var(--v3-fs-h3); }
.v3-h4 { font-size: var(--v3-fs-h4); }
.v3-h5 { font-size: var(--v3-fs-h5); }
.v3-h6 { font-size: var(--v3-fs-h6); }

.v3-lead {
	font-family: var(--v3-font-sans);
	font-size: var(--v3-fs-lead);
	line-height: var(--v3-lh-body);
	color: var(--v3-ink);
}

.v3-body {
	font-family: var(--v3-font-sans);
	font-size: var(--v3-fs-body);
	line-height: var(--v3-lh-body);
	color: var(--v3-ink);
}

.v3-meta-label {
	font-family: var(--v3-font-sans);
	font-size: var(--v3-fs-meta);
	font-weight: var(--v3-weight-medium);
	letter-spacing: var(--v3-ls-meta);
	text-transform: uppercase;
	color: var(--v3-muted);
}

.v3-caption {
	font-family: var(--v3-font-sans);
	font-size: var(--v3-fs-caption);
	line-height: var(--v3-lh-tight);
	color: var(--v3-muted);
}

.v3-muted {
	color: var(--v3-muted);
}

/* ---- Color helpers ---- */
.v3-bg-canvas { background-color: var(--v3-bg); }
.v3-bg-paper  { background-color: var(--v3-bg-paper); }
.v3-bg-dark   { background-color: var(--v3-bg-dark); color: var(--v3-ink-inverse); }
.v3-ink       { color: var(--v3-ink); }
.v3-ink-muted { color: var(--v3-muted); }
.v3-accent-gold { color: var(--v3-gold); }
.v3-accent-navy { color: var(--v3-navy); }

/* ---- Rule utilities ---- */
.v3-rule {
	border: 0;
	border-top: var(--v3-rule);
	margin: 0;
}

.v3-rule-gold {
	border: 0;
	border-top: var(--v3-rule-gold);
	margin: 0;
}

/* short gold tick (e.g. ornament under headings) */
.v3-tick-gold {
	display: inline-block;
	width: 48px;
	height: 1px;
	background-color: var(--v3-gold);
	vertical-align: middle;
}

/* ---- Section / layout utilities ---- */
.v3-section {
	padding-top: var(--v3-section-y);
	padding-bottom: var(--v3-section-y);
	background-color: var(--v3-bg);
}

.v3-section-lg {
	padding-top: var(--v3-section-y-lg);
	padding-bottom: var(--v3-section-y-lg);
}

.v3-container {
	width: 100%;
	max-width: var(--v3-container-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--v3-gutter);
	padding-right: var(--v3-gutter);
	box-sizing: border-box;
}

.v3-container-narrow {
	max-width: var(--v3-container-narrow);
}

.v3-container-prose {
	max-width: var(--v3-container-prose);
}

/* ---- Buttons (gold CTA / ghost) ---- */
.v3-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--v3-space-2);
	min-height: 48px;
	padding: var(--v3-space-3) var(--v3-space-7);
	font-family: var(--v3-font-sans);
	font-size: var(--v3-fs-body);
	font-weight: var(--v3-weight-medium);
	letter-spacing: var(--v3-ls-body);
	text-decoration: none;
	border: var(--v3-rule-width) solid transparent;
	cursor: pointer;
	transition:
		background-color var(--v3-dur-base) var(--v3-ease),
		color var(--v3-dur-base) var(--v3-ease),
		border-color var(--v3-dur-base) var(--v3-ease);
}

.v3-btn-gold {
	background-color: var(--v3-gold);
	color: var(--v3-bg-paper);
	border-color: var(--v3-gold);
}
.v3-btn-gold:hover,
.v3-btn-gold:focus-visible {
	background-color: var(--v3-gold-dark);
	border-color: var(--v3-gold-dark);
	color: var(--v3-bg-paper);
}

.v3-btn-ghost {
	background-color: transparent;
	color: var(--v3-ink);
	border-color: var(--v3-ink);
}
.v3-btn-ghost:hover,
.v3-btn-ghost:focus-visible {
	background-color: var(--v3-ink);
	color: var(--v3-bg-paper);
}

/* ---- Focus ring ---- */
.v3-focus:focus-visible,
.v3-btn:focus-visible {
	outline: var(--v3-focus-ring);
	outline-offset: var(--v3-focus-offset);
}

/* ---- Fade-up animation (Sprint 1 utility; applied opt-in) ---- */
.v3-fade-up {
	opacity: 0;
	transform: translateY(12px);
	transition:
		opacity var(--v3-dur-slow) var(--v3-ease),
		transform var(--v3-dur-slow) var(--v3-ease);
	will-change: opacity, transform;
}
.v3-fade-up.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.v3-fade-up {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---- Responsive token adjustments ---- */
@media (max-width: 1023px) {
	:root {
		--v3-section-y: 96px;
		--v3-section-y-lg: 120px;
	}
}

@media (max-width: 767px) {
	:root {
		--v3-section-y: 72px;
		--v3-section-y-lg: 96px;
		--v3-gutter: 20px;
	}
}