/* Picoon / Video — Design Tokens
 * JARVIS / TTS シリーズと同じスタジオ感を保つための配色トークン。
 * 使い方:  <link rel="stylesheet" href="picoon-tokens.css">
 *          color: var(--picoon-pink);
 */

:root {
  /* -------- Surface / 地 -------- */
  --picoon-paper:        #FCF4D6;  /* ペーパーイエロー（ノート紙背景） */
  --picoon-paper-2:      #FBF0C5;  /* カード地（少し濃いめ） */
  --picoon-white:        #FFFFFF;  /* 純白カード地 */

  /* -------- Ink / 線・文字 -------- */
  --picoon-ink:          #1E2A38;  /* 濃紺ーー線・文字・影の主役 */
  --picoon-ink-70:       rgba(30, 42, 56, 0.70);
  --picoon-ink-50:       rgba(30, 42, 56, 0.50);
  --picoon-ink-20:       rgba(30, 42, 56, 0.20);

  /* -------- Brand accents / 4色 + 1 ニュートラル -------- */
  --picoon-pink:         #FF3B7C;  /* 主アクセント：CTA・主要バッジ */
  --picoon-teal:         #4FC2BD;  /* 副アクセント：カテゴリ・統計 */
  --picoon-coral:        #E55A4A;  /* 副アクセント：並列要素の差し色（旧アンバー枠） */
  --picoon-lilac:        #A685FF;  /* 副アクセント：4つ並列の文脈での4色目 */
  --picoon-amber:        #F2B544;  /* 単独使用専用：ロゴ・装飾・レター・アバター */
  --picoon-muted:        #7E8896;  /* グレー寄りのニュートラル（無色の選択状態） */

  /* -------- 影 / 立体感 -------- */
  /* 3段階。対象物の大きさで使い分け。
   * sm: チップ・アバター・小さなボタン（3px）
   * md: 通常カード・主要ボタン・ナビ（6px）
   * lg: 大きなヒーローカード・ページ枠（10px）
   */
  --picoon-shadow-sm:    3px 3px 0 var(--picoon-ink);
  --picoon-shadow-md:    6px 6px 0 var(--picoon-ink);
  --picoon-shadow-lg:    10px 10px 0 var(--picoon-ink);
  --picoon-shadow-pressed: 1px 1px 0 var(--picoon-ink);
  /* 後方互換: 旧名は md/lg に揃える */
  --picoon-shadow-chip:  var(--picoon-shadow-sm);
  --picoon-shadow-btn:   var(--picoon-shadow-md);
  --picoon-shadow-card:  var(--picoon-shadow-md);
  --picoon-shadow-frame: var(--picoon-shadow-lg);
  --picoon-border:       3px solid var(--picoon-ink);
  --picoon-border-thin:  2.5px solid var(--picoon-ink);
  --picoon-radius-card:  22px;
  --picoon-radius-tile:  16px;
  --picoon-radius-pill:  999px;

  /* -------- Type / 書体 -------- */
  --picoon-font-en:      'Nunito', 'Zen Maru Gothic', system-ui, sans-serif;
  --picoon-font-jp:      'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', system-ui, sans-serif;
  --picoon-font-body:    'Zen Maru Gothic', system-ui, sans-serif;
  --picoon-font-caption: 'Nunito', system-ui, sans-serif;
  --picoon-font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* -------- Tone → Accent map（作品サムネ用） -------- */
  /* warm / pink / red / magenta */
  --picoon-tone-warm:    var(--picoon-pink);
  /* navy / blue / cyan / mint / green */
  --picoon-tone-cool:    var(--picoon-teal);
  /* amber / yellow */
  --picoon-tone-warm-2:  var(--picoon-amber);
  /* gray / neutral */
  --picoon-tone-mute:    var(--picoon-muted);
}

/* JS から読みたい時のためのデータ属性版。
 * document.documentElement.dataset.picoonPalette などで切替も可能。 */
[data-picoon-palette="dark"] {
  --picoon-paper:    #171B26;
  --picoon-paper-2:  #1F2433;
  --picoon-white:    #2A2F3E;
  --picoon-ink:      #FFE9A8;
  --picoon-ink-70:   rgba(255, 233, 168, 0.70);
  --picoon-ink-50:   rgba(255, 233, 168, 0.50);
  --picoon-ink-20:   rgba(255, 233, 168, 0.20);
}