/* =========================================================
   VIVI Design System Base
   Version: 0.1.0
   Purpose:
   全站輕量頁面共用基礎 CSS
   包含：色票、字型、字級、間距、容器、按鈕、卡片、表單、RWD 基準
========================================================= */


/* =========================================================
   1. Reset / 基礎重設
========================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button,
input,
select,
textarea {
	font: inherit;
}

button {
	cursor: pointer;
}

strong {
	font-weight: var(--vivi-fw-bold);
}


/* =========================================================
   2. Design Tokens / 設計變數
========================================================= */

:root {
	/* Brand Colors / BuddyBoss Theme Options 對齊色票 */
	--vivi-color-primary: #996515;
	--vivi-color-black: #000000;
	--vivi-color-black-soft: #5A5A5A;
	--vivi-color-red: var(--vivi-color-primary);
	--vivi-color-accent: #996515;
	--vivi-color-accent-soft: #F2F4F5;

	/* Background Colors */
	--vivi-color-bg: #FAFBFD;
	--vivi-color-bg-soft: #F2F4F5;
	--vivi-color-bg-warm: #F2F4F5;
	--vivi-color-bg-deep: #647385;

	/* Surface */
	--vivi-color-card: #FFFFFF;
	--vivi-color-card-bg: var(--vivi-color-card);
	--vivi-color-card-warm: #FFFFFF;

	/* Text */
	--vivi-color-heading: #000000;
	--vivi-color-text: #5A5A5A;
	--vivi-color-text-soft: #5A5A5A;
	--vivi-color-text-muted: #5A5A5A;
	--vivi-color-text-light: #647385;
	--vivi-color-muted: var(--vivi-color-text-muted);
	--vivi-color-alternate-text: #996515;
	--vivi-orange: var(--vivi-color-primary);
	--vivi-color-text-inverse: #FFFFFF;

	/* Border / Shadow */
	--vivi-color-border: #D6D9DD;
	--vivi-color-border-strong: #D6D9DD;
	--vivi-shadow-soft: 0 10px 28px rgba(0, 0, 0, 0.05);
	--vivi-shadow-card: 0 18px 45px rgba(0, 0, 0, 0.07);
	--vivi-shadow-hero: 0 28px 80px rgba(0, 0, 0, 0.09);

	/* Fonts
	   依照 BuddyBoss 預設系統 UI 字體堆疊設定。
	   不載入 BuddyBoss CSS，也不額外載入字體檔，維持輕量模式。
	*/
	--vivi-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, "Noto Sans TC", "Microsoft JhengHei", sans-serif;
	--vivi-font-body: var(--vivi-font-main);
	--vivi-font-heading: var(--vivi-font-main);

	/* Font Weights / 字重：參照 BuddyBoss 預設，避免過度粗黑 */
	--vivi-fw-regular: 400;
	--vivi-fw-medium: 500;
	--vivi-fw-semibold: 600;
	--vivi-fw-bold: 600;
	--vivi-fw-heavy: 700;

	/* Desktop Font Sizes */
	--vivi-fs-hero: clamp(42px, 4.6vw, 68px);
	--vivi-fs-h1: 46px;
	--vivi-fs-h2: 32px;
	--vivi-fs-h3: 20px;
	--vivi-fs-body-lg: 18px;
	--vivi-fs-body: 16px;
	--vivi-fs-small: 14px;
	--vivi-fs-xs: 12px;
	--vivi-fs-button: 14px;
	--vivi-fs-price: 18px;
	--vivi-fs-price-lg: 34px;

	/* Button Scale */
	--vivi-btn-height: 42px;
	--vivi-btn-padding-x: 22px;
	--vivi-btn-radius: var(--vivi-radius-sm);

	/* Line Heights */
	--vivi-lh-heading: 1.12;
	--vivi-lh-body: 1.7;
	--vivi-lh-compact: 1.45;

	/* Layout */
	--vivi-container: 1180px;
	--vivi-container-wide: 1320px;
	--vivi-page-padding-x: 64px;
	--vivi-section-padding-y: 72px;

	/* Mobile Layout */
	--vivi-mobile-padding-x: 16px;
	--vivi-mobile-section-padding-y: 44px;

	/* Radius */
	--vivi-radius-xs: 6px;
	--vivi-radius-sm: 8px;
	--vivi-radius-md: 14px;
	--vivi-radius-lg: 20px;
	--vivi-radius-xl: 28px;
	--vivi-radius-pill: 999px;

	/* Spacing */
	--vivi-space-2xs: 4px;
	--vivi-space-xs: 8px;
	--vivi-space-sm: 12px;
	--vivi-space-md: 16px;
	--vivi-space-lg: 24px;
	--vivi-space-xl: 32px;
	--vivi-space-2xl: 48px;
	--vivi-space-3xl: 64px;
	--vivi-space-4xl: 80px;

	/* Header */
	--vivi-header-height: 78px;
	--vivi-header-height-mobile: 68px;

	/* Transition */
	--vivi-transition-fast: 0.16s ease;
	--vivi-transition: 0.22s ease;

	/* Forms / 表單：完全依照 01 色票延伸，不另外使用頁面自訂色 */
	--vivi-form-bg: var(--vivi-color-card);
	--vivi-form-text: var(--vivi-color-text);
	--vivi-form-placeholder: var(--vivi-color-text-light);
	--vivi-form-border: var(--vivi-color-border-strong);
	--vivi-form-border-focus: var(--vivi-color-red);
	--vivi-form-focus-ring: color-mix(in srgb, var(--vivi-color-red) 16%, transparent);
}


/* =========================================================
   3. Base Elements / 基礎元素
========================================================= */

body.vivi-lite-page,
body.vivi-lite-home-page,
body.vivi-design-system-page {
	min-height: 100vh;
	background: var(--vivi-color-bg);
	color: var(--vivi-color-text);
	font-family: var(--vivi-font-body);
	font-size: var(--vivi-fs-body);
	line-height: var(--vivi-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.vivi-page {
	width: 100%;
	min-height: 100vh;
	background: var(--vivi-color-bg);
	color: var(--vivi-color-text);
}

.vivi-kicker {
	margin: 0 0 var(--vivi-space-sm);
	color: var(--vivi-color-red);
	font-size: var(--vivi-fs-body);
	font-weight: var(--vivi-fw-bold);
	letter-spacing: 0.08em;
}

.vivi-heading-hero,
.vivi-h1,
.vivi-h2,
.vivi-h3 {
	margin: 0;
	font-family: var(--vivi-font-main);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-heading);
	color: var(--vivi-color-heading);
}

.vivi-heading-hero {
	font-size: var(--vivi-fs-hero);
	letter-spacing: 0.05em;
}

.vivi-h1 {
	font-size: var(--vivi-fs-h1);
	letter-spacing: 0.04em;
}

.vivi-h2 {
	font-size: var(--vivi-fs-h2);
	letter-spacing: 0.04em;
}

.vivi-h3 {
	font-size: var(--vivi-fs-h3);
	letter-spacing: 0.02em;
}

.vivi-text {
	margin: 0;
	color: var(--vivi-color-text-muted);
	font-size: var(--vivi-fs-body);
	line-height: var(--vivi-lh-body);
}

.vivi-text-lg {
	font-size: var(--vivi-fs-body-lg);
}

.vivi-text-small {
	font-size: var(--vivi-fs-small);
}

.vivi-text-xs {
	font-size: var(--vivi-fs-xs);
}


/* =========================================================
   4. Layout / 共用版面
========================================================= */

.vivi-container {
	width: min(100% - calc(var(--vivi-page-padding-x) * 2), var(--vivi-container));
	margin-inline: auto;
}

.vivi-container-wide {
	width: min(100% - calc(var(--vivi-page-padding-x) * 2), var(--vivi-container-wide));
	margin-inline: auto;
}

.vivi-section {
	padding-block: var(--vivi-section-padding-y);
}

.vivi-section-soft {
	background: var(--vivi-color-bg-soft);
}

.vivi-section-warm {
	background: var(--vivi-color-bg-warm);
}

.vivi-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--vivi-space-lg);
	margin-bottom: var(--vivi-space-xl);
}

.vivi-section-head h2 {
	margin: 0;
	font-family: var(--vivi-font-main);
	font-size: var(--vivi-fs-h2);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-heading);
	letter-spacing: 0.04em;
}

.vivi-section-head p {
	margin: var(--vivi-space-xs) 0 0;
	color: var(--vivi-color-text-muted);
	font-weight: var(--vivi-fw-medium);
}

.vivi-grid {
	display: grid;
	gap: var(--vivi-space-lg);
}

.vivi-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vivi-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vivi-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vivi-grid-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* =========================================================
   5. Buttons / 按鈕
========================================================= */

.vivi-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--vivi-space-xs);
	min-height: var(--vivi-btn-height);
	padding: 0 var(--vivi-btn-padding-x);
	border: 1px solid transparent;
	border-radius: var(--vivi-btn-radius);
	font-size: var(--vivi-fs-button);
	font-weight: var(--vivi-fw-bold);
	line-height: 1;
	white-space: nowrap;
	transition:
		transform var(--vivi-transition),
		opacity var(--vivi-transition),
		background-color var(--vivi-transition),
		color var(--vivi-transition),
		border-color var(--vivi-transition);
}

.vivi-btn:hover {
	transform: translateY(-1px);
	opacity: 0.92;
}

.vivi-btn-primary,
.vivi-btn-dark {
	color: var(--vivi-color-text-inverse);
	background: var(--vivi-color-black);
	border-color: var(--vivi-color-black);
}

.vivi-btn-secondary,
.vivi-btn-light {
	color: var(--vivi-color-black);
	background: color-mix(in srgb, var(--vivi-color-card) 62%, transparent);
	border-color: var(--vivi-color-black);
}

.vivi-btn-red {
	color: var(--vivi-color-text-inverse);
	background: var(--vivi-color-red);
	border-color: var(--vivi-color-red);
}

.vivi-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-size: var(--vivi-fs-small);
	font-weight: var(--vivi-fw-bold);
	border-bottom: 1px solid currentColor;
	transition: color var(--vivi-transition);
}

.vivi-link-arrow:hover {
	color: var(--vivi-color-red);
}


/* =========================================================
   6. Cards / 卡片
========================================================= */

.vivi-card {
	overflow: hidden;
	background: var(--vivi-color-card);
	border: 1px solid var(--vivi-color-border);
	border-radius: var(--vivi-radius-md);
	box-shadow: var(--vivi-shadow-soft);
}

.vivi-card-body {
	padding: var(--vivi-space-md);
}

.vivi-card-title {
	margin: 0;
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-h3);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-compact);
}

.vivi-card-meta {
	margin: 0 0 var(--vivi-space-xs);
	color: var(--vivi-color-text-light);
	font-size: var(--vivi-fs-xs);
	font-weight: var(--vivi-fw-semibold);
}

.vivi-card-text {
	margin: var(--vivi-space-xs) 0 0;
	color: var(--vivi-color-text-muted);
	font-size: var(--vivi-fs-small);
	line-height: var(--vivi-lh-body);
}


/* =========================================================
   7. Price / 價格
========================================================= */

.vivi-price {
	display: inline-flex;
	align-items: baseline;
	gap: var(--vivi-space-xs);
	color: var(--vivi-color-red);
	font-size: var(--vivi-fs-price);
	font-weight: var(--vivi-fw-heavy);
	line-height: 1;
}

.vivi-price del {
	color: var(--vivi-color-text-light);
	font-size: 0.78em;
	font-weight: var(--vivi-fw-semibold);
}

.vivi-price-lg {
	font-size: var(--vivi-fs-price-lg);
}


/* =========================================================
   8. Tags / 標籤
========================================================= */

.vivi-tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 28px;
	padding: 0 12px;
	color: var(--vivi-color-text-inverse);
	background: var(--vivi-color-red);
	border-radius: var(--vivi-radius-pill);
	font-size: var(--vivi-fs-xs);
	font-weight: var(--vivi-fw-bold);
	letter-spacing: 0.04em;
}

.vivi-tag-light {
	color: var(--vivi-color-red);
	background: color-mix(in srgb, var(--vivi-color-accent-soft) 62%, transparent);
}


/* =========================================================
   9. Form / 表單
========================================================= */

.vivi-input,
.vivi-select,
.vivi-textarea {
	width: 100%;
	min-height: 44px;
	padding: 0 14px;
	color: var(--vivi-form-text);
	background: var(--vivi-form-bg);
	border: 1px solid var(--vivi-form-border);
	border-radius: var(--vivi-radius-sm);
	outline: none;
	transition: border-color var(--vivi-transition), box-shadow var(--vivi-transition);
}

.vivi-textarea {
	min-height: 120px;
	padding-top: 12px;
	resize: vertical;
}

.vivi-input:focus,
.vivi-select:focus,
.vivi-textarea:focus {
	border-color: var(--vivi-form-border-focus);
	box-shadow: 0 0 0 4px var(--vivi-form-focus-ring);
}

.vivi-input::placeholder,
.vivi-textarea::placeholder {
	color: var(--vivi-form-placeholder);
}


/* =========================================================
   10. Image Ratio / 圖片比例工具
========================================================= */

.vivi-ratio {
	position: relative;
	overflow: hidden;
	background: var(--vivi-color-bg-warm);
	border-radius: var(--vivi-radius-md);
}

.vivi-ratio::before {
	content: "";
	display: block;
}

.vivi-ratio > img,
.vivi-ratio > picture,
.vivi-ratio > video,
.vivi-ratio > .vivi-ratio-fill {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.vivi-ratio-16x9::before {
	padding-top: 56.25%;
}

.vivi-ratio-4x3::before {
	padding-top: 75%;
}

.vivi-ratio-7x5::before {
	padding-top: 71.428%;
}

.vivi-ratio-5x3::before {
	padding-top: 60%;
}

.vivi-ratio-9x11::before {
	padding-top: 122.222%;
}


/* =========================================================
   11. Utility / 工具類別
========================================================= */

.vivi-muted {
	color: var(--vivi-color-text-muted);
}

.vivi-red {
	color: var(--vivi-color-red);
}

.vivi-bg-soft {
	background: var(--vivi-color-bg-soft);
}

.vivi-bg-warm {
	background: var(--vivi-color-bg-warm);
}

.vivi-hide-desktop {
	display: none !important;
}


/* =========================================================
   12. Responsive / RWD 基準
========================================================= */

@media (max-width: 1100px) {
	:root {
		--vivi-page-padding-x: 24px;
		--vivi-section-padding-y: 56px;
	}

	.vivi-grid-6 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.vivi-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vivi-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	:root {
		--vivi-fs-hero: 34px;
		--vivi-fs-h1: 30px;
		--vivi-fs-h2: 24px;
		--vivi-fs-h3: 17px;
		--vivi-fs-body-lg: 15px;
		--vivi-fs-body: 14px;
		--vivi-fs-small: 12px;
		--vivi-fs-xs: 11px;
		--vivi-fs-button: 13px;
		--vivi-fs-price: 15px;
		--vivi-fs-price-lg: 30px;

		--vivi-btn-height: 40px;
		--vivi-btn-padding-x: 18px;

		--vivi-page-padding-x: var(--vivi-mobile-padding-x);
		--vivi-section-padding-y: var(--vivi-mobile-section-padding-y);
	}

	.vivi-container,
	.vivi-container-wide {
		width: min(100% - calc(var(--vivi-mobile-padding-x) * 2), var(--vivi-container));
	}

	.vivi-section-head {
		align-items: center;
		gap: var(--vivi-space-md);
		margin-bottom: var(--vivi-space-lg);
	}

	.vivi-section-head h2 {
		font-size: var(--vivi-fs-h2);
	}

	.vivi-section-head p {
		font-size: var(--vivi-fs-small);
	}

	.vivi-btn {
		min-height: var(--vivi-btn-height);
		padding: 0 var(--vivi-btn-padding-x);
		font-size: var(--vivi-fs-button);
	}

	.vivi-btn-mobile-full {
		width: 100%;
	}

	.vivi-grid-6,
	.vivi-grid-4,
	.vivi-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--vivi-space-sm);
	}

	.vivi-grid-2 {
		grid-template-columns: 1fr;
	}

	.vivi-card-body {
		padding: var(--vivi-space-sm);
	}

	.vivi-price del {
		display: block;
		margin-left: 0;
	}

	.vivi-hide-mobile {
		display: none !important;
	}

	.vivi-hide-desktop {
		display: block !important;
	}
}