/* ==========================================================================
   TOKENS — 色・タイポ・余白・時間の基準値
   すべてのCSSはここで定義した変数のみを参照する（生の値を各所へ書かない）。
   ========================================================================== */

:root{
	/* --- Color: Light World（AOS） --- */
	--c-porcelain:#f7f9fc;
	--c-mist:#e7ecf3;
	--c-silver:#c9d3e2;

	/* --- Color: Dark World（AOD） --- */
	--c-navy:#101a2e;
	--c-abyss:#070c16;

	/* --- Color: Light（光のアクセント） --- */
	--c-signal:#7fa8ff;
	--c-halo:#b8a6f5;

	/* --- Color: Text --- */
	--c-ink:#0b1220;
	--c-ink-sub:#55637a;
	--c-snow:#f2f6ff;
	--c-snow-sub:rgb(242 246 255 / .58);

	/* --- トーンに応じて切り替わる意味付き変数 --- */
	--bg:var(--c-porcelain);
	--fg:var(--c-ink);
	--fg-sub:var(--c-ink-sub);
	--rule:var(--c-silver);

	/* --- Typography --- */
	--font-display:"Archivo","Zen Kaku Gothic New",system-ui,sans-serif;
	--font-body:"Zen Kaku Gothic New","Hiragino Sans",system-ui,sans-serif;
	--font-mono:"JetBrains Mono",ui-monospace,monospace;

	/* --- 画面高さに連動するスケール（ノートPCで自動縮小） --- */
	--scale:1;

	--fs-hero:calc(clamp(2.4rem,6vw,6.5rem) * var(--scale));
	--fs-display:calc(clamp(1.75rem,4.2vw,4.25rem) * var(--scale));
	--fs-title:calc(clamp(1.3rem,2.4vw,2.25rem) * var(--scale));
	--fs-lead:calc(clamp(.95rem,1.2vw,1.2rem) * var(--scale));
	--fs-body:clamp(.9rem,1vw,1.0625rem);
	--fs-label:clamp(.65rem,.78vw,.78rem);

	--lh-tight:1.3;
	--lh-body:1.95;
	--ls-label:.24em;

	--gutter:clamp(20px,5vw,96px);
	--space-block:calc(clamp(56px,9svh,168px) * var(--scale));
	--measure:68ch;
	--max-stage:1680px;

	--dur-fast:240ms;
	--dur-base:760ms;
	--dur-slow:1600ms;
	--ease-out:cubic-bezier(.16,1,.3,1);
	--ease-io:cubic-bezier(.62,.02,.2,1);

	--z-header:80;
	--z-nav:90;
}

@media (max-height:860px){ :root{ --scale:.88 } }
@media (max-height:740px){ :root{ --scale:.78 } }

/* トーン別の色切り替え */
[data-aa-tone="light"] { --bg:var(--c-porcelain); --fg:var(--c-ink);  --fg-sub:var(--c-ink-sub);  --rule:var(--c-silver) }
[data-aa-tone="silver"]{ --bg:var(--c-mist);      --fg:var(--c-ink);  --fg-sub:var(--c-ink-sub);  --rule:var(--c-silver) }
[data-aa-tone="dark"]  { --bg:var(--c-navy);      --fg:var(--c-snow); --fg-sub:var(--c-snow-sub); --rule:rgb(255 255 255/.16) }
[data-aa-tone="deep"]  { --bg:var(--c-abyss);     --fg:var(--c-snow); --fg-sub:var(--c-snow-sub); --rule:rgb(255 255 255/.12) }

/* 明→暗、暗→明の転換区間 */
[data-aa-tone="shift"]{
	--bg:linear-gradient(180deg,var(--c-mist) 0%,var(--c-navy) 100%);
	--fg:var(--c-snow); --fg-sub:var(--c-snow-sub); --rule:rgb(255 255 255/.16);
}
[data-aa-tone="shift-up"]{
	--bg:linear-gradient(180deg,var(--c-abyss) 0%,#1b2a45 38%,var(--c-mist) 88%,var(--c-porcelain) 100%);
	--fg:var(--c-snow); --fg-sub:var(--c-snow-sub); --rule:rgb(255 255 255/.16);
}