/* Kizuki Z01 — Brand Tokens
 * Canonical CSS variables matching assets/from-claude-design-v1/Z01.html
 * Per docs/design/CLAUDE-DESIGN-ALIGNMENT-LEDGER.md row 1 (Z01)
 */
:root {
  /* Neutrals */
  --ink: #0E0E10;
  --ink-2: #2A2A2D;
  --ink-3: #5B5B62;
  --ink-4: #8A8A90;
  --line: #E8E8E4;
  --line-2: #EFEFEF;
  --bg: #FAFAF7;
  --bg-2: #FFFFFF;
  --bg-3: #F4F4EF;

  /* Accent — vermillion 朱 */
  --accent: #DC322F;
  --accent-soft: #FFE4E2;
  --accent-strong: #B82420;

  /* Semantic */
  --success: #2E8B57;
  --success-soft: #E4F1EA;
  --warning: #D4A24C;
  --warning-soft: #FBF1DD;
  --danger: #DC322F;
  --info: #3B4FE4;
  --info-soft: #E2E5FB;
  --purple: #6B4FE4;
  --purple-soft: #E8E2FB;

  /* Type */
  --font-sans: "Inter", "Hiragino Sans", "Noto Sans JP", "Noto Sans CJK JP", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-serif: "Source Serif Pro", "Hiragino Mincho ProN", serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;

  --t-xs: 11px;
  --t-sm: 13px;
  --t-base: 15px;
  --t-md: 18px;
  --t-lg: 22px;
  --t-xl: 28px;
  --t-2xl: 36px;
  --t-3xl: 48px;
  --t-hero: 64px;

  --lh-tight: 1.2;
  --lh-body: 1.55;
  --lh-loose: 1.75;

  /* Spacing — 4px grid */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;

  /* Radius */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 22%;
  --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(14, 14, 16, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 14, 16, 0.06);

  /* Motion */
  --motion-base: 150ms ease-out;
  --motion-modal: 220ms cubic-bezier(0.16, 1, 0.3, 1);
  --motion-spark: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --motion: 150ms ease-out;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; }
button { font-family: inherit; }