/* 原宿Today v2 — tokens (--ht-*)
   Source: docs/claude/design/static/ht.css :root.
   This is the only file that may contain raw color values. Every other
   stylesheet references these variables. Pink is reserved for 本日最終日 /
   本日限定 (and the logo's "Today"). */

:root {
	/* color */
	--ht-white: #ffffff;
	--ht-mist: #f2f7f7;
	--ht-line: #dde6e6;
	--ht-ink: #1b2a26;
	--ht-ink-2: #3c4a47;
	--ht-ink-3: #5b6b67;
	--ht-green: #1f7a4a;
	--ht-green-stripe: #23844f;
	--ht-green-700: #1a5c38;
	--ht-green-200: #bfe6cc;
	--ht-green-100: #e1f1e6;
	--ht-green-50: #e6f4ea;
	--ht-sky: #2b7fb3;
	--ht-sky-700: #1f6594;
	--ht-sky-900: #123f5e;
	--ht-sky-300: #8ad6f4;  /* 開催予定のタグ（明るい水色） */
	--ht-sky-100: #dff1fb;
	--ht-sky-stripe: #d4ecf9;
	--ht-pink: #e5335f;
	--ht-pink-700: #b8204a;
	--ht-pink-100: #fde7ec;
	--ht-gray-100: #edf1f2;
	--ht-ph-a: #e3ecec;
	--ht-ph-b: #d6e2e2;
	--ht-backdrop: #dcd3c4;
	--ht-accent: var(--ht-green); /* セクション見出しの英字（季節配色で別色にできる） */

	/* translucent (raw rgba kept here, not in parts) */
	--ht-glass: rgba(255, 255, 255, .86);
	--ht-glass-strong: rgba(255, 255, 255, .92);
	--ht-white-a70: rgba(255, 255, 255, .7);
	--ht-white-a12: rgba(255, 255, 255, .12);
	--ht-overlay: rgba(27, 42, 38, .88);   /* photo lightbox backdrop (ink) */
	--ht-shadow: 0 12px 40px rgba(27, 60, 70, .12);
	--ht-shadow-header: 0 8px 28px rgba(27, 60, 70, .14), inset 0 0 0 1px rgba(27, 60, 70, .06);

	/* type */
	--ht-font-jp: 'Zen Maru Gothic', sans-serif;
	--ht-font-num: 'Caprasimo', serif;
	--ht-font-body: 'Figtree', 'Zen Maru Gothic', sans-serif;
	--ht-fs-title: 26px;   /* 記事タイトル */
	--ht-fs-section: 24px; /* セクション見出し */
	--ht-fs-card: 16px;    /* カード見出し */
	--ht-fs-body: 16px;    /* 本文 */
	--ht-fs-note: 13px;    /* 補足・ラベル */

	/* radius */
	--ht-r-panel: 32px;
	--ht-r-card: 22px;
	--ht-r-img: 16px;
	--ht-r-pill: 999px;

	/* space */
	--ht-gutter: 32px;
	--ht-gap-card: 20px;
	--ht-gap-section: 64px;
	--ht-max: 1200px;
	--ht-header-h: 92px;

	/* list row (一覧修正002): date block and photo */
	--ht-date-w: 84px;
	--ht-date-num: 34px;
	--ht-thumb: 96px;

	/* stripes (135deg) */
	--ht-stripe-sky: repeating-linear-gradient(135deg, var(--ht-sky-100) 0 14px, var(--ht-sky-stripe) 14px 28px);
	--ht-stripe-green: repeating-linear-gradient(135deg, var(--ht-green) 0 14px, var(--ht-green-stripe) 14px 28px);
	--ht-stripe-pink: repeating-linear-gradient(135deg, var(--ht-pink) 0 6px, var(--ht-white) 6px 12px);
	--ht-stripe-ph: repeating-linear-gradient(135deg, var(--ht-ph-a) 0 10px, var(--ht-ph-b) 10px 20px);

	/* floating header (values carried over from the previous theme) */
	--ht-header-reveal-duration: 1.07s;
	--ht-header-reveal-easing: ease;
	--ht-header-floating-z: 50;
}

/* Seasonal colors (季節配色). inc/seasonal-colors.php decides the season in
   JST and sets <html data-ht-season="…"> before first paint; no attribute
   (or JS off) = the normal colors above. Each block overrides color variables
   only — never spacing, type or layout. The stripe variables above are
   declared on the same <html> element, so they pick these values up without
   being redefined. --ht-white, --ht-ink*, --ht-mist/--ht-line and --ht-pink*
   (本日最終日・本日限定・ロゴ) stay as they are.
   green family = buttons, links, 開催中, おすすめ, dark stripe panels;
   sky family = light stripe panels, 日付, 明日スタート, 開催予定, 常設. */
html[data-ht-season="halloween"] {
	/* deep purple (dark stripe, buttons, links) */
	--ht-green: #5b2a86;
	--ht-green-stripe: #66329a;
	--ht-green-700: #47206a;
	--ht-green-200: #dcc8f0;
	--ht-green-100: #f0e6f8;
	--ht-green-50: #f6effb;
	/* pale orange (light stripe) + orange accent, purple text on it */
	--ht-sky: #a84a00;
	--ht-sky-700: #8f3f00;
	--ht-sky-900: #3b1a56;
	--ht-sky-300: #ffc58a;
	--ht-sky-100: #fff0e0;
	--ht-sky-stripe: #ffe2c2;
	--ht-accent: var(--ht-sky);
}
html[data-ht-season="christmas"] {
	/* deep green (dark stripe, buttons, links) */
	--ht-green: #17583a;
	--ht-green-stripe: #1c6443;
	--ht-green-700: #10432b;
	--ht-green-200: #c3e3cf;
	--ht-green-100: #e3f1e8;
	--ht-green-50: #eef7f1;
	/* cream (light stripe) + gold for 日付・明日スタート */
	--ht-sky: #86600a;
	--ht-sky-700: #704f06;
	--ht-sky-900: #3c2c05;
	--ht-sky-300: #f1d98e;
	--ht-sky-100: #fbf6e6;
	--ht-sky-stripe: #f3e9cc;
	/* red accent: decorative headings only, darker than the 本日最終日 pink */
	--ht-accent: #b3202c;
}

/* ≤767px is the single breakpoint */
@media (max-width: 767px) {
	:root {
		--ht-fs-title: 20px;
		--ht-fs-section: 19px;
		--ht-fs-card: 15px;
		--ht-r-panel: 24px;
		--ht-r-card: 18px;
		--ht-r-img: 14px;
		--ht-gutter: 16px;
		--ht-gap-card: 12px;
		--ht-gap-section: 40px;
		--ht-header-h: 116px;
		--ht-date-w: 64px;
		--ht-date-num: 26px;
		--ht-thumb: 64px;
	}
}