/*
 * MintHome デザイントークン（仕様 §78）。
 * すべての色・余白・角丸・影・blur・motion を変数化。コンポーネントは値を直書きしない。
 * ブランド色は MintTail 由来（ミント #34D399 / 深緑 #04100D / インディゴ #6366F1）だが、命名は MintHome 用に新設。
 *
 * ★ motion 系の値は src/core/animationEngine/AnimationTokens.ts と一致させること。
 *    tests/unit/animation.test.ts が両者の一致を検証する。
 */
:root {
  /* --- brand palette --- */
  --mh-primary: #34d399;
  --mh-primary-deep: #0f9e75;
  --mh-primary-light: #6ee7b7;
  --mh-primary-soft: #a7f3d0;
  --mh-primary-pale: #e3fcef;
  --mh-indigo: #6366f1;
  --mh-forest: #0b2420;
  --mh-deep: #04100d;
  --mh-surface-dark: #0c201c;
  --mh-surface-light: #f6fffb;
  --mh-muted: #87a79c;

  /* --- semantic colors (ThemeEngine が --color-accent / --color-accent-2 / --color-on-accent を上書きする) --- */
  --color-accent: var(--mh-primary);
  --color-accent-2: var(--mh-indigo);
  --color-on-accent: #06231a;
  --color-danger: #ff6b6b;
  --color-success: #34d399;
  --color-warning: #f5a623;

  /* --- gradients --- */
  --grad-brand: linear-gradient(135deg, var(--color-accent), var(--mh-primary-light));
  --grad-deep: linear-gradient(160deg, var(--mh-deep), var(--mh-forest));

  /* --- spacing (§78: --space-1 … --space-8) --- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;

  /* --- radius --- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* --- shadows --- */
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 0.22);
  --shadow-md: 0 8px 24px rgb(0 0 0 / 0.3);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.42);

  /* --- blur (motion profile で themes.css が上書き) --- */
  --blur-sm: 8px;
  --blur-md: 16px;
  --blur-lg: 28px;
  --glass-blur: var(--blur-md);
  --glass-saturation: 1.3;
  --glass-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturation));

  /* --- motion: AnimationTokens.ts と一致 --- */
  --motion-scale: 1;
  --motion-duration-instant: calc(80ms / var(--motion-scale));
  --motion-duration-fast: calc(160ms / var(--motion-scale));
  --motion-duration-normal: calc(280ms / var(--motion-scale));
  --motion-duration-slow: calc(480ms / var(--motion-scale));
  --motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
  --motion-ease-decel: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-accel: cubic-bezier(0.4, 0, 1, 1);
  /* CSS では spring を直接表せないので、わずかに跳ねる近似カーブを用意（JS 側は SPRING.* を使う） */
  --motion-spring: cubic-bezier(0.34, 1.32, 0.64, 1);

  /* --- typography --- */
  --font-ui-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', 'Yu Gothic', system-ui, -apple-system, sans-serif;
  --font-novel-size: 21px; /* §79: default novel */

  /* --- z-index の層（下から順）。値の直書き禁止。 --- */
  --z-background: 0;
  --z-ambient: 1;
  --z-content: 10;
  --z-overlay: 90;
  --z-island: 100;
  --z-toast: 900;
  --z-system: 9999;

  /* --- time-of-day (ThemeEngine が更新) --- */
  --ambient-light: 1;
  --sun-altitude: 1;
  --moon-visibility: 0;
  --sky-tint: var(--color-accent);
}