/* ============================================================================
 * design-tokens.css — viewer-v5 SHIRO design system
 * ============================================================================
 * SSoT: (path) (§7-§11)
 *       (path) (A1-A8)
 *       .claude/skills/svg-diagram/palettes/shiro.md
 *       .claude/skills/svg-diagram/patterns/shiro-showcase.md
 * Accent: SANGOKU 群青 #1B3D6E (アニメ「日本三國」由来、2026-05-11 owner 採用)
 * ============================================================================ */

:root {
  /* === Color (Notion Light mode 10色 + SANGOKU accent) === */
  --color-text-default: #373530;
  --color-text-gray:    #787774;
  --color-text-light:   #A6A299;
  --color-text-blue:    #1B3D6E;  /* SANGOKU 群青 (was #487CA5) */

  --color-bg-page:    #FFFFFF;
  --color-bg-surface: #F7F7F5;     /* sidebar / panel bg */
  --color-bg-warmer:  #F1F1EF;     /* pill gray bg */
  --color-bg-blue:    #E7ECF3;     /* SANGOKU 薄め (group lighter pastel) */
  --color-bg-green:   #EEF3ED;     /* approved / passed */
  --color-bg-red:     #FAECEC;     /* delete / fail */
  --color-bg-yellow:  #FAF3DD;     /* warn */

  --color-icon-blue:        #1B3D6E;    /* SANGOKU 群青 ★ 全 accent の SSoT、ここを変えれば全 viewer 一括更新 */
  --color-icon-blue-hover:  #2A4A7C;    /* 群青 lighter (button hover) */
  --color-icon-blue-soft:   #9AB0CC;    /* 群青 さらに lighter (chat 補助 text) */
  --color-icon-green:       #548164;
  --color-icon-red:         #C4554D;
  --color-icon-yellow:      #C29343;
  --color-icon-orange:      #E88A3C;
  --color-icon-gray:        #A6A299;
  --color-on-accent:        #FFFFFF;    /* button 内 text (accent bg 上) */

  --color-border:        #EAEAE8;
  --color-border-strong: #D8D8D5;

  /* Agent colors */
  --color-agent-active:  #548164;  /* 思考中・実行中 */
  --color-agent-idle:    #A6A299;  /* 待機中 */
  --color-agent-error:   #C4554D;  /* 失敗・boundary */

  /* === Spacing (4/8/16 Notion grid) === */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* === Typography === */
  --font-sans: 'Inter', -apple-system, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feature: 'cv11', 'ss01', 'ss03', 'cv02';

  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 14px;
  --font-size-md:   15px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --line-height-tight: 1.3;
  --line-height-base:  1.5;
  --line-height-loose: 1.7;

  /* === Radius === */
  --radius-sm:   3px;
  --radius-md:   4px;       /* pill / button */
  --radius-lg:   6px;
  --radius-pill: 12px;

  /* === Shadow === */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:    0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-lg:    0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* === Animation === */
  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --easing:        cubic-bezier(0.4, 0, 0.2, 1);
}