/*
 * LOWRL デザイントークン（CSS変数）
 * 色・フォント・余白の「値」は theme.json が正。ここは theme.json が読み込まれない場合の
 * フォールバック兼、テーマ内で使う短い別名（--lw-*）の定義です。
 *
 * ブレークポイント（CSS変数は @media で使えないため、数値をそのまま書く）
 *   Mobile : 〜767px（基準・min-width なし）
 *   Tablet : @media (min-width: 768px)
 *   Desktop: @media (min-width: 1024px)
 *   Wide   : @media (min-width: 1440px)
 * 参考値としての変数は下の --lw-bp-* に定義（JS等が参照）。
 */
:root {
	/* 色：白ベース・黒文字（クライアント要望）。黒背景の部分は下の .lw-dark スコープで元の暗い値に戻す。 */
	--lw-ink: var(--wp--preset--color--ink, #FFFFFF);
	--lw-ink-2: var(--wp--preset--color--ink-2, #F7F5F4);
	--lw-ink-3: var(--wp--preset--color--ink-3, #F3EFEF);
	--lw-surface: var(--wp--preset--color--surface, #FAF8F7);
	--lw-text: var(--wp--preset--color--text, #111111);
	--lw-muted: var(--wp--preset--color--muted, #5C5651);
	--lw-subtle: var(--wp--preset--color--subtle, #6B645F);
	--lw-dim: var(--wp--preset--color--dim, #B8B1AC); /* 装飾専用。文字には使わない */
	--lw-accent: var(--wp--preset--color--accent, #C4677E);
	--lw-accent-soft: var(--wp--preset--color--accent-soft, #8E3348); /* リンクの hover（白地） */
	--lw-accent-pale: var(--wp--preset--color--accent-pale, #A94A61); /* 白地のピンク文字（比 5.5）。淡い面には --lw-accent-tint */
	--lw-accent-light: var(--wp--preset--color--accent-light, #E8AABB); /* 白文字を載せない */
	--lw-accent-peach: var(--wp--preset--color--accent-peach, #A94A61); /* 白地：価格などのピンク文字 */
	--lw-accent-deep: var(--wp--preset--color--accent-deep, #8E3348);
	--lw-accent-strong: var(--wp--preset--color--accent-strong, #A94A61); /* 白文字OK（比 5.47） */
	--lw-accent-tint: #F6E3E8; /* 淡いピンク面（タグ・帯） */
	--lw-paper: var(--wp--preset--color--paper, #F7EEEA);
	--lw-paper-text: var(--wp--preset--color--paper-text, #14100F);
	--lw-paper-muted: var(--wp--preset--color--paper-muted, #6E645F);
	--lw-inverse: #FFFFFF; /* 文字色（--lw-text）の反対色（黒ボタン上の文字など） */
	--lw-header-bg: rgba(255, 255, 255, 0.94);

	/* 罫線（黒の透過） */
	--lw-line-weak: rgba(17, 17, 17, 0.12);
	--lw-line: rgba(17, 17, 17, 0.2);
	--lw-line-strong: rgba(17, 17, 17, 0.55);
	--lw-ink-rgb: 255, 255, 255;
	--lw-text-rgb: 17, 17, 17; /* rgba() で透過を付けた文字色・罫線用 */
	--lw-fade-rgb: 255, 255, 255; /* 写真の端を面の色へなじませるグラデーション用 */

	/* グラデーション */
	--lw-grad-reserve-band: linear-gradient(100deg, #8E3348 0%, #A94A61 100%); /* Tablet以下（既定） */
	--lw-grad-reserve-button: linear-gradient(135deg, #8E3348 0%, #A94A61 100%);
	--lw-grad-placeholder: linear-gradient(160deg, #2A2523 0%, #4A403C 100%);
	--lw-grad-stat: linear-gradient(120deg, #D4788E 0%, #A94A61 100%); /* 白地の大きな数字 */

	/* フォント */
	--lw-font-en: var(--wp--preset--font-family--oswald, "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif);
	--lw-font-jp: var(--wp--preset--font-family--noto-sans-jp, "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif);

	/* フォントサイズ（fluid の値は theme.json が出力する --wp--preset--font-size--* を使う） */
	--lw-fs-micro: var(--wp--preset--font-size--micro, 11px);
	--lw-fs-label: 15px; /* セクション番号ラベル（01 / ABOUT 等）。SPは14px */
	--lw-fs-eyebrow: var(--wp--preset--font-size--eyebrow, 12px);
	--lw-fs-small: var(--wp--preset--font-size--small, clamp(13px, 0.8vw + 10px, 14px));
	--lw-fs-body: var(--wp--preset--font-size--body, clamp(15px, 0.4vw + 13.5px, 16px));
	--lw-fs-lead: var(--wp--preset--font-size--lead, clamp(16px, 1vw + 11px, 20px));
	--lw-fs-title-s: var(--wp--preset--font-size--title-s, clamp(20px, 1.5vw + 14px, 26px));
	--lw-fs-display-s: var(--wp--preset--font-size--display-s, clamp(28px, 4vw, 48px));
	--lw-fs-display-m: var(--wp--preset--font-size--display-m, clamp(30px, 5vw, 58px));
	--lw-fs-display-l: var(--wp--preset--font-size--display-l, clamp(34px, 6vw, 76px));
	--lw-fs-hero-m: var(--wp--preset--font-size--hero-m, clamp(40px, 7.5vw, 104px));
	--lw-fs-hero-l: var(--wp--preset--font-size--hero-l, clamp(44px, 10.5vw, 148px));
	--lw-fs-number: var(--wp--preset--font-size--number, clamp(56px, 7vw, 88px));

	/* レイアウト */
	--lw-container: 1180px;
	--lw-gutter: clamp(20px, 5vw, 64px);
	--lw-section-sm: clamp(40px, 6vw, 72px);
	--lw-section-md: clamp(56px, 7vw, 96px);
	--lw-section-lg: clamp(72px, 9vw, 120px);
	--lw-header-h: 60px;

	/* その他 */
	--lw-radius: 0; /* 角丸なし */
	--lw-z-header: 50;
	--lw-z-nav: 60;
	--lw-tap: 44px; /* 最小タップ領域 */

	/* ブレークポイント（参照用。@media では数値を直接書く） */
	--lw-bp-tablet: 768px;
	--lw-bp-desktop: 1024px;
	--lw-bp-wide: 1440px;
}

@media (min-width: 1024px) {
	:root {
		--lw-header-h: 68px;
		--lw-grad-reserve-band: linear-gradient(100deg, #8E3348 0%, #A94A61 40%, #C4677E 70%, #E8AABB 100%);
	}
}

@media (max-width: 767px) {
	:root {
		--lw-fs-label: 14px;
	}
}


/* ============================================================
 * 黒背景スコープ（TOP の HERO・フッター・RESERVE/RECRUIT の帯・Lightbox・写真に文字を重ねる部分）。
 * 白ベースのサイトの中で、元の暗い配色に戻す。セレクタはここに足していく。
 * ============================================================ */
.lw-dark,
.lw-fhero,
.lw-footer,
.lw-cta-reserve,
.lw-cta-recruit,
.lw-lb,
.lw-card-style,
.lw-salon-hero,
.lw-sstore,
.lw-sstyle__tile,
.lw-spick__item,
.lw-mnot__tile,
.lw-tone-tile,
.lw-social__tile,
.lw-pnav__card,
.lw-nbrand,
.lw-rteam,
.lw-rjoin {
	--lw-ink: #0A0A0A;
	--lw-ink-2: #0D0D0D;
	--lw-ink-3: #120F0E;
	--lw-surface: #171310;
	--lw-text: #F2EFEC;
	--lw-muted: #9A9490;
	--lw-subtle: #7E7873;
	--lw-dim: #6E6863;
	--lw-accent-soft: #D98A9C;
	--lw-accent-pale: #EFB6C4;
	--lw-accent-peach: #F4C7B6;
	--lw-inverse: #14100F;
	--lw-line-weak: rgba(242, 239, 236, 0.12);
	--lw-line: rgba(242, 239, 236, 0.18);
	--lw-line-strong: rgba(242, 239, 236, 0.5);
	--lw-fade-rgb: 10, 10, 10;
	--lw-ink-rgb: 10, 10, 10;
	--lw-text-rgb: 242, 239, 236;
	color: var(--lw-text);
}

.lw-fhero,
.lw-footer,
.lw-rjoin {
	background-color: var(--lw-ink);
}