/* =========================================================
   モノトレンド — デザイントークン (:root variables)
   出典: design-reference/styles.css
   方針: 配色・タイポ・半径・影をすべてここに集約。
        コンポーネントCSSやページCSSはここを参照するだけにする。
   ========================================================= */

:root {
	/* ---- surfaces ---- */
	--bg: #f7f5f0;          /* warm beige base */
	--bg-elev: #ffffff;     /* card / surface */
	--bg-sunken: #efece5;   /* secondary chip / thumb bg */

	/* ---- ink (text) 4 levels ---- */
	--ink: #1a1816;         /* primary text */
	--ink-2: #4a4641;       /* secondary */
	--ink-3: #8b857c;       /* tertiary / meta */
	--ink-4: #c4bfb5;       /* disabled / placeholder */

	/* ---- lines ---- */
	--line: #e6e1d6;
	--line-strong: #d4cdbe;

	/* ---- accent ---- */
	--accent: #c44d2c;       /* terracotta */
	--accent-ink: #ffffff;
	--accent-soft: #f4e6df;  /* highlight bg */

	/* ---- semantic ---- */
	--gold: #c89b3c;
	--positive: #3d7a4a;

	/* ---- radius ---- */
	--radius-s: 4px;
	--radius-m: 8px;
	--radius-l: 14px;

	/* ---- typography ---- */
	--serif: "Noto Serif JP", "Hiragino Mincho ProN", "YuMincho", serif;
	--sans:  "Inter", "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
	--mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* ---- shadow ---- */
	--shadow-card: 0 1px 0 rgba(26,24,22,0.04), 0 1px 2px rgba(26,24,22,0.04);
	--shadow-pop:  0 8px 32px rgba(26,24,22,0.08), 0 2px 6px rgba(26,24,22,0.04);

	/* ---- layout ---- */
	--container-max: 1200px;
	--container-pad: 32px;
	/* header はスクロール追従しないので 0 (sticky 復活時は 65px に戻す) */
	--header-h: 0px;
}

/* グローバルリセット (最小限) */
*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--sans);
	font-feature-settings: "palt" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a   { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

/* タイポ補助クラス */
.serif { font-family: var(--serif); font-weight: 500; }
.mono  { font-family: var(--mono); }
.tnum  { font-variant-numeric: tabular-nums; }