@charset "UTF-8";

/* ==========================================================================
   ARTIKS Design Tokens
   全ページ共通の設計変数。色・タイポ・余白・ガラス表現をここで一元管理する。
   ========================================================================== */

:root {
	color-scheme: dark;

	/* --- Color ------------------------------------------------------------ */
	--c-bg: #120f0a;
	--c-bg-deep: #0c0a07;
	--c-surface: #1d1811;
	--c-surface-2: #262016;
	--c-primary: #d4af35;
	--c-primary-bright: #e8c95f;
	--c-primary-soft: rgba(212, 175, 53, 0.12);
	--c-text: #f5efe4;
	--c-text-strong: #fffdf7;
	--c-muted: #c9bda9;          /* 本文補助色: #120f0a に対し 10.3:1 (WCAG AAA) */
	--c-muted-strong: #ded3c0;
	--c-border: rgba(212, 175, 53, 0.2);
	--c-hairline: rgba(255, 255, 255, 0.1);
	--c-overlay: rgba(9, 7, 5, 0.72);

	/* --- Liquid glass ------------------------------------------------------
	   Glass-1 = 強(ヘッダー / 主要CTA)、Glass-2 = 中(カード類)。
	   これ以外の面はベタ塗り(Flat)とし、1画面あたりのガラス面は2〜3要素までとする。
	   --------------------------------------------------------------------- */
	--glass-1-bg:
		linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02)),
		linear-gradient(135deg, rgba(20, 16, 11, 0.82), rgba(20, 16, 11, 0.44));
	--glass-1-bg-solid: linear-gradient(135deg, #211a12, #17120c);
	--glass-1-border: rgba(255, 255, 255, 0.16);
	--glass-1-blur: 22px;
	--glass-1-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 18px 40px rgba(0, 0, 0, 0.34);

	--glass-2-bg:
		linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015)),
		linear-gradient(135deg, rgba(22, 18, 12, 0.74), rgba(22, 18, 12, 0.46));
	--glass-2-bg-solid: linear-gradient(135deg, #1d1811, #16110b);
	--glass-2-border: rgba(255, 255, 255, 0.1);
	--glass-2-blur: 14px;
	--glass-2-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 12px 28px rgba(0, 0, 0, 0.26);

	/* --- Typography -------------------------------------------------------- */
	--ff-jp: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif;
	--ff-en: 'Manrope', 'Noto Sans JP', sans-serif;
	--ff-display: 'Cormorant Garamond', 'Noto Serif JP', Georgia, serif;

	--fs-hero: clamp(2rem, 1.05rem + 4.2vw, 3.5rem);
	--fs-h1: clamp(1.6rem, 1.1rem + 2.2vw, 2.6rem);
	--fs-h2: clamp(1.45rem, 1.1rem + 1.6vw, 2.15rem);
	--fs-h3: clamp(1.1rem, 1rem + 0.5vw, 1.375rem);
	--fs-lead: clamp(1rem, 0.95rem + 0.4vw, 1.1875rem);
	--fs-body: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem); /* iOS 自動ズーム防止のため 16px 下限 */
	--fs-sm: 0.875rem;
	--fs-xs: 0.75rem;

	--lh-tight: 1.3;
	--lh-snug: 1.5;
	--lh-normal: 1.75;
	--lh-relaxed: 1.95;

	--ls-eyebrow: 0.18em;

	/* --- Spacing ----------------------------------------------------------- */
	--space-section: clamp(3.5rem, 1.8rem + 7vw, 7.5rem);
	--space-card: clamp(1.25rem, 0.85rem + 1.6vw, 2rem);
	--gap: clamp(1rem, 0.65rem + 1.4vw, 1.75rem);
	--gap-sm: clamp(0.75rem, 0.6rem + 0.6vw, 1rem);

	/* --- Layout ------------------------------------------------------------ */
	--shell: 1180px;
	--shell-narrow: 780px;
	--gutter: clamp(1.125rem, 0.6rem + 2vw, 2rem);
	--header-h: 76px;

	/* --- Radius ------------------------------------------------------------ */
	--r-sm: 12px;
	--r-md: 18px;
	--r-lg: 24px;
	--r-xl: 32px;
	--r-pill: 999px;

	/* --- Motion ------------------------------------------------------------ */
	--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
	--dur: 0.32s;
	--dur-fast: 0.18s;

	/* --- Elevation --------------------------------------------------------- */
	--z-header: 100;
	--z-drawer: 200;
	--z-skip: 300;
}

@media (min-width: 900px) {
	:root {
		--header-h: 92px;
	}
}

/* --- backdrop-filter 非対応環境のフォールバック --------------------------
   旧 Android WebView 等ではガラス面が透けて文字が読めなくなるため、
   透過をやめてベタ塗りに切り替える。
   ---------------------------------------------------------------------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	:root {
		--glass-1-bg: var(--glass-1-bg-solid);
		--glass-2-bg: var(--glass-2-bg-solid);
	}
}

/* --- 透過を減らす設定 ---------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
	:root {
		--glass-1-bg: var(--glass-1-bg-solid);
		--glass-2-bg: var(--glass-2-bg-solid);
		--glass-1-blur: 0px;
		--glass-2-blur: 0px;
	}
}

/* --- モーションを減らす設定 ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	:root {
		--dur: 0.01ms;
		--dur-fast: 0.01ms;
	}
}