/* ============================================================
   YELLOW FISH 経営ダッシュボード — デザイントークン(正典)
   ロゴ(assets/logo.png)から抽出した4色を土台にしている。
   抽出値: 空色 #00A8E8 / 魚の黄 #FFF100 / 深い波 #005A82 / 下の波 #0070C0
   (会社概要の公式指定は 青 #29ABE2 / 黄 #FFE600。近似なので抽出値を優先)
   ここを直したら index.html / apps.html の両方に効く。
   ============================================================ */
:root {
  /* --- ブランド4色(ロゴ抽出) --- */
  --yf-sky:      #00A8E8;   /* 主役。ナビの選択・主ボタン・リンク */
  --yf-yellow:   #FFF100;   /* 差し色。魚・進捗バー・AIボタン。文字は必ず紺で */
  --yf-navy:     #005A82;   /* 見出し・ヒーロー背景の深い側 */
  --yf-blue:     #0070C0;   /* ヒーローのグラデ中間・第2ボタン */

  /* --- 派生(明るい方) --- */
  --yf-sky-50:   #F0FAFE;
  --yf-sky-100:  #E1F4FC;
  --yf-sky-200:  #B9E6F8;
  --yf-yellow-100: #FFF9C4;
  --yf-yellow-200: #FFF08A;
  --yf-gold:     #B08600;   /* 黄色を文字で使うときの読める版 */

  /* --- 文字・線・面 --- */
  --yf-ink:      #0C2A3A;   /* 本文の黒(紺寄り) */
  --yf-ink-2:    #3A5668;   /* 補足文 */
  --yf-muted:    #7C93A2;   /* ラベル・単位 */
  --yf-line:     #D8E8F0;   /* カード枠・区切り */
  --yf-bg:       #F3F8FB;   /* ページ背景(ごく薄い空色) */
  --yf-surface:  #FFFFFF;   /* カード */
  --yf-surface-2:#F7FBFD;   /* 表のヘッダ・入力欄 */

  /* --- 状態(チャートの系列色とは別。必ずアイコンか文字を添える) --- */
  --yf-good:     #1E9E5A;
  --yf-good-bg:  #E6F6EC;
  --yf-warn:     #D97A00;
  --yf-warn-bg:  #FFF1DC;
  --yf-bad:      #D93A3A;
  --yf-bad-bg:   #FDE8E8;

  /* --- チャート系列色(dataviz バリデータ通過済み・順番固定・循環させない)
         第1=店頭/伊川谷、第2=メルカリ/徳島、第3=Shopify/松山、第4=その他/沖縄
         空色と金色は白地とのコントラストが3:1未満なので、値は必ず直接ラベルで添える --- */
  --yf-c1: #0A6A9A;
  --yf-c2: #00A8E8;
  --yf-c3: #D19C00;
  --yf-c4: #7B5CD6;
  --yf-target: #B9E6F8;   /* 目標・比較用の淡い棒 */
  --yf-grid:   #E6EFF4;   /* 目盛線(引っ込める) */

  /* --- 書体 --- */
  --yf-font-jp: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic UI", "Meiryo", sans-serif;
  --yf-font-num: "Outfit", "Zen Kaku Gothic New", "Yu Gothic UI", sans-serif;

  /* --- 角丸(階層ごとに固定) --- */
  --yf-r-card: 16px;
  --yf-r-inner: 10px;
  --yf-r-pill: 999px;

  /* --- 影(灰色ではなく空色寄り) --- */
  --yf-shadow-card: 0 1px 2px rgba(0, 90, 130, 0.06), 0 8px 24px rgba(0, 90, 130, 0.06);
  --yf-shadow-hero: 0 12px 32px rgba(0, 90, 130, 0.22);
  --yf-shadow-float: 0 10px 28px rgba(0, 90, 130, 0.28);

  /* --- 余白(4pxグリッド) --- */
  --yf-s1: 4px;  --yf-s2: 8px;  --yf-s3: 12px; --yf-s4: 16px;
  --yf-s5: 20px; --yf-s6: 24px; --yf-s8: 32px; --yf-s10: 40px; --yf-s12: 48px;

  /* --- レイアウト --- */
  --yf-sidebar-w: 264px;
  --yf-content-max: 1440px;
}