/* =====================================================================
   RBL3x3 デザイントークン — style-guide v4 準拠
   色は「役割」で固定する: 支配色(青) / 休止面(明るいグレー) / 締め色(青灰) / 強調色(黄・橙)
   ===================================================================== */
:root {
  /* ---- 役割別カラー(ガイド第5節 配色A) ---- */
  --blue:        #287DDC;   /* 支配色 */
  --blue-deep:   #1B5FB0;
  --blue-soft:   #D8E9FA;
  --sky:         #4EC3F0;   /* 支配色の明るい派生 */
  --rest:        #F0F1EF;   /* 休止面 */
  --paper:       #FFFFFF;
  --navy:        #253446;   /* 締め色 */
  --navy-deep:   #16202D;
  --yellow:      #FFBD31;   /* 強調色(5%) */
  --orange:      #FF7A1F;
  --magenta:     #E8368F;   /* ROYAL用の第2強調 */
  --lime:        #C9E23D;   /* 獲得・成功 */
  --red:         #E5484D;
  --line:        #D9DCE1;

  --text:        var(--navy-deep);
  --text-dim:    #5B6778;
  --text-faint:  #8E98A6;
  --on-blue:     #FFFFFF;
  --on-yellow:   var(--navy-deep);

  --tier-free:   var(--blue);
  --tier-crew:   var(--orange);
  --tier-royal:  var(--magenta);

  /* ---- タイポ ---- */
  --font-display: 'Kanit', 'Noto Sans JP', sans-serif;      /* 英数見出し(太・イタリック) */
  --font-body:    'Noto Sans JP', system-ui, sans-serif;     /* 本文・日本語見出し */

  --text-xs: 0.72rem;
  --text-sm: 0.84rem;
  --text-md: 1rem;
  --text-lg: clamp(1.15rem, 1rem + 0.6vw, 1.35rem);
  --text-xl: clamp(1.55rem, 1.3rem + 1.4vw, 2rem);
  --text-hero: clamp(2.2rem, 1.7rem + 3vw, 3.2rem);

  /* ---- 余白・形 ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 14px;
  --cut: 12px;                            /* 切り角のサイズ */
  --tilt: -4deg;                          /* 見出し帯の傾き(3〜6度) */

  /* ---- 平面グラフィックの影(ガイド第6.1 グラフィックの影) ---- */
  --shadow-offset: 4px 4px 0 var(--navy);
  --shadow-offset-sm: 3px 3px 0 var(--navy);
  --shadow-soft: 0 8px 24px rgba(37, 52, 70, 0.12);

  /* ---- 模様 ---- */
  --dots: radial-gradient(rgba(37,52,70,0.14) 1.2px, transparent 1.3px);
  --dots-size: 10px 10px;
  --stripes: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(255,255,255,0.35) 10px 14px);

  /* ---- モーション ---- */
  --dur-fast: 140ms;
  --dur: 260ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --app-max: 480px;
  --nav-h: 66px;
}