/* just for us — デザイントークン（Claude Design の tokens.json から生成）
   色・影はライト／ダークの2組。<html data-theme="dark"> でダークに切り替わる。
   見た目を変えるときはここ（tokens）を変え、bundle.css には色や数値を直接書かない。 */

:root, [data-theme="light"] {
  --paper: #f5eee3;
  --paper-raised: #fcf8f2;
  --paper-sunk: #ece3d5;
  --paper-dot: #dacdb9;
  --hatch: #d2c3ac;
  --line: #e3d7c5;
  --line-strong: #8c7b6a;
  --ink: #2b2420;
  --ink-muted: #67594d;
  --on-ink: var(--paper);
  --vermilion: #b8432a;
  --vermilion-soft: #f5ddd2;
  --on-vermilion: #fff8f1;
  --pine: #4a7062;
  --on-pine: #fcf8f2;
  --tape: #d9bb768c;
  --scrim: #2b242073;
  --viewer-bg: #14100d;
  --viewer-ink: #f3eadc;
  --viewer-ink-muted: #b9ab9a;
  --viewer-control: #f3eadc29;
  --shadow-paper: 0 1px 0 #2b24200f, 0 2px 6px -2px #2b24201f;
  --shadow-photo: 0 1px 2px #2b242024, 0 8px 16px -6px #2b242040;
  --shadow-sheet: 0 -12px 32px #2b242029;
  --focus-ring: 0 0 0 2px #f5eee3, 0 0 0 4px #4a7062;
}

[data-theme="dark"] {
  --paper: #1b1613;
  --paper-raised: #262019;
  --paper-sunk: #14100d;
  --paper-dot: #302821;
  --hatch: #40362d;
  --line: #3a3129;
  --line-strong: #7d6e60;
  --ink: #f1e8da;
  --ink-muted: #b8aa9a;
  --on-ink: var(--paper);
  --vermilion: #e57b5d;
  --vermilion-soft: #3b241d;
  --on-vermilion: #1b1613;
  --pine: #8fbaa8;
  --on-pine: #1b1613;
  --tape: #c9a46a40;
  --scrim: #000000a6;
  --shadow-paper: 0 1px 0 #00000059;
  --shadow-photo: 0 2px 10px #00000080;
  --shadow-sheet: 0 -12px 32px #000000b3;
  --focus-ring: 0 0 0 2px #1b1613, 0 0 0 4px #8fbaa8;
}

:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --radius-xs: 3px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-full: 9999px;
  --tap-min: 44px;
  --topbar-h: 52px;
  --tabbar-h: 56px;
  --content-max: 640px;
  --sheet-max: 440px;
  --avatar-size: 36px;
  --thumb-size: 64px;
  --z-bar: 20;
  --z-sheet: 40;
  --z-viewer: 50;
  --opacity-disabled: 0.42;
  --font-script: "Homemade Apple", "Snell Roundhand", cursive;
  --font-serif: "Noto Serif SC", "Noto Serif CJK SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

.t-logo-lg { font-family: var(--font-script); font-size: 40px; line-height: 64px; font-weight: 400; }
.t-logo { font-family: var(--font-script); font-size: 20px; line-height: 36px; font-weight: 400; }
.t-title { font-family: var(--font-serif); font-size: 26px; line-height: 36px; font-weight: 700; letter-spacing: 0.04em; }
.t-num { font-family: var(--font-serif); font-size: 36px; line-height: 40px; font-weight: 700; letter-spacing: -0.01em; }
.t-heading { font-family: var(--font-serif); font-size: 17px; line-height: 24px; font-weight: 600; }
.t-stamp { font-family: var(--font-serif); font-size: 20px; line-height: 24px; font-weight: 900; }
.t-subtitle { font-family: var(--font-serif); font-size: 15px; line-height: 24px; font-weight: 400; letter-spacing: 0.12em; }
.t-initial { font-family: var(--font-serif); font-size: 15px; line-height: 20px; font-weight: 600; }
.t-body { font-family: var(--font-sans); font-size: 16px; line-height: 26px; font-weight: 400; }
.t-label { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 600; }
.t-meta { font-family: var(--font-sans); font-size: 13px; line-height: 18px; font-weight: 400; }
.t-caption { font-family: var(--font-sans); font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0.02em; }