/* =========================================================
   h2fictions — Design Tokens (Single Source of Truth)
   Theme: FORMALIN SPECIMEN LAB / ホルマリン標本室
   ---------------------------------------------------------
   全ページが @import する。色・字・余白・モーションの正本。
   DESIGN.md はこのファイルから生成される側に逆転させる方針。
   ========================================================= */

:root {
  /* ---- Palette: Formalin Specimen Lab ---- */
  --base:        #0B0F0E;   /* 瓶底の黒（緑み）— body bg            */
  --base-deep:   #070A09;   /* さらに深い影                          */
  --panel:       #131B19;   /* 標本棚の面                            */
  --panel-2:     #1B2522;   /* 一段明るいパネル                      */
  --line:        #2A3531;   /* 罫線・境界                            */
  --line-soft:   #1F2825;

  --label:       #ECE6D6;   /* bone / 標本ラベル（明るい面）          */
  --label-2:     #DAD2BD;   /* くすんだ紙                            */
  --ink:         #16130F;   /* ラベル上の文字（暗）                   */

  --glow:        #B6FF3C;   /* 保存液の蛍光（主アクセント）            */
  --glow-dim:    #7FB52A;   /* 沈んだ蛍光                            */
  --amber:       #E8A24B;   /* 琥珀標本（副アクセント）                */

  /* ---- Text roles (on --base) ---- */
  --text:        #E6E3D8;   /* 本文                                  */
  --text-soft:   #ABB1A8;   /* 補足                                  */
  --text-mute:   #6E7872;   /* 脚注・ラベル                          */
  --text-on-label: #16130F; /* bone面の上の文字                      */

  /* ---- Per-work accent (works.js が --accent を上書きする) ---- */
  --accent:      var(--glow);

  /* ---- Typography ---- */
  --font-jp:     "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-serif:  "Noto Serif JP", "Hiragino Mincho ProN", "游明朝", serif;
  --font-disp:   "Archivo Black", "Outfit", var(--font-jp), sans-serif;
  --font-mono:   "JetBrains Mono", "VT323", ui-monospace, "Courier New", monospace;

  --lh-body: 1.75;
  --lh-head: 1.12;
  --ls-mono: 0.22em;   /* mono ラベル                               */
  --ls-head: -0.02em;  /* 巨大ディスプレイ                          */

  /* ---- Spacing (8px base) ---- */
  --sp-xs: 4px;  --sp-s: 8px;  --sp-m: 16px; --sp-l: 24px;
  --sp-xl: 40px; --sp-2xl: 64px; --sp-3xl: 96px; --sp-4xl: 128px;

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.3s;
  --dur: 0.7s;
  --dur-slow: 1.2s;

  /* ---- Radius / elevation (museum = ほぼ角・薄影) ---- */
  --radius: 2px;
  --shadow: 0 18px 40px -22px rgba(0,0,0,0.9);
  --glow-ring: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent),
               0 0 28px -6px color-mix(in srgb, var(--accent) 60%, transparent);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur: 0.001s; --dur-slow: 0.001s; }
}