/* =============================================================
   Sentinel Dashboard — Design tokens（P2a-UI・2026-07-21 デザイン確定版）
   転記元（優先順）: ①design/ds-tokens/tokens/*.css 実物値
                    ②design/Sentinel Design Spec.dc.html 記載値
                    ③design/Sentinel実装指示書.md
   ブランドカラー #CD0F73 確定（2026-07-21 二宮Ink・#C21765 は旧値＝不使用）。
   Sentinel固有の新設は --stl-*（バッジ淡色面ほか）のみ。HEX直書き禁止＝UIは必ずvar参照。
   ============================================================= */

/* ===== Webfonts（セルフホスト・外部リクエストゼロ要件） =====
   ds-tokens/tokens/fonts.css の @import(Google Fonts) は使用禁止のため
   @font-face に置換（fonts/README.md に出所・OFL同梱）。 */
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/montserrat-400.woff2") format("woff2");
}
@font-face {
  font-family: "Montserrat";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/montserrat-700.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/static/fonts/notosansjp-400.woff2") format("woff2");
}
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal; font-weight: 700; font-display: swap;
  src: url("/static/fonts/notosansjp-700.woff2") format("woff2");
}

:root {
  /* ===== Brand / マゼンタ系（colors.css 実物値転記） ===== */
  --jfk-magenta:        #CD0F73;
  --jfk-magenta-strong: #B30D65;
  --jfk-magenta-dark:   #7A0E3F;
  --jfk-magenta-deep:   #4D0828;
  --jfk-pink:           #E85A9B;
  --jfk-pink-soft:      #FFE5F1;
  --jfk-pink-tint:      #F1E6EF;

  /* ===== Neutral（純黒禁止） ===== */
  --jfk-ink:            #333333;
  --jfk-ink-2:          #6B6B6B;
  --jfk-ink-3:          #9A9A9A;
  --jfk-white:          #FFFFFF;
  --jfk-bg:             #FFFFFF;
  --jfk-bg-subtle:      #F7F7F7;
  --jfk-bg-muted:       #F2F2F2;
  --jfk-border:         #E5E5E5;
  --jfk-border-strong:  #D4D4D4;

  /* ===== Semantic ===== */
  --jfk-success:        #2E9E5B;
  --jfk-warning:        #E8A33D;
  --jfk-error:          #D64545;
  --jfk-info:           #3B82C4;

  /* ===== Gradient ===== */
  --jfk-gradient-cover: linear-gradient(135deg, #4D0828 0%, #CD0F73 100%);
  --jfk-gradient-pink:  linear-gradient(180deg, #FFFFFF 0%, #F1E6EF 100%);

  /* ===== Alias ===== */
  --jfk-surface:        var(--jfk-white);
  --jfk-surface-subtle: var(--jfk-bg-subtle);
  --jfk-text:           var(--jfk-ink);
  --jfk-text-muted:     var(--jfk-ink-2);
  --jfk-text-faint:     var(--jfk-ink-3);
  --jfk-text-on-brand:  var(--jfk-white);
  --jfk-link:           var(--jfk-magenta);
  --jfk-focus-ring:     var(--jfk-magenta);

  /* ===== Typography（typography.css 実物値転記） ===== */
  --jfk-font-jp:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans",
                  "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --jfk-font-en:  "Montserrat", "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --jfk-font-num: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --jfk-text-2xs:  0.75rem;
  --jfk-text-xs:   0.8125rem;
  --jfk-text-sm:   0.875rem;
  --jfk-text-base: 1rem;
  --jfk-text-md:   1.125rem;
  --jfk-text-lg:   1.25rem;
  --jfk-text-xl:   1.5rem;
  --jfk-text-2xl:  1.875rem;
  --jfk-text-3xl:  2.25rem;
  --jfk-text-4xl:  3rem;
  --jfk-text-5xl:  3.75rem;
  --jfk-weight-light:   300;
  --jfk-weight-regular: 400;
  --jfk-weight-medium:  500;
  --jfk-weight-bold:    700;
  --jfk-leading-tight:   1.25;
  --jfk-leading-heading: 1.4;
  --jfk-leading-body:    1.75;
  --jfk-tracking-tight:  -0.01em;
  --jfk-tracking-normal: 0;
  --jfk-tracking-wide:   0.04em;
  --jfk-tracking-wider:  0.12em;

  /* ===== Spacing / Layout（spacing.css 実物値転記） ===== */
  --jfk-space-1:  4px;
  --jfk-space-2:  8px;
  --jfk-space-3:  12px;
  --jfk-space-4:  16px;
  --jfk-space-5:  24px;
  --jfk-space-6:  32px;
  --jfk-space-8:  48px;
  --jfk-space-10: 64px;
  --jfk-space-12: 80px;
  --jfk-space-16: 128px;
  --jfk-container:        1200px;
  --jfk-container-narrow: 880px;

  /* ===== Effects（effects.css 実物値転記） ===== */
  --jfk-radius-sm:   6px;
  --jfk-radius-md:   10px;
  --jfk-radius-lg:   16px;
  --jfk-radius-xl:   24px;
  --jfk-radius-pill: 9999px;
  --jfk-shadow-sm: 0 1px 2px rgba(17,17,17,0.04);
  --jfk-shadow-md: 0 2px 8px rgba(17,17,17,0.06);
  --jfk-shadow-lg: 0 8px 24px rgba(17,17,17,0.08);
  --jfk-glow-magenta: 0 0 80px rgba(205,15,115,0.25);
  --jfk-ease:          cubic-bezier(0.4, 0, 0.2, 1);
  --jfk-logo-aspect:     1.468;
  --jfk-logo-clearspace: 0.25;
  --jfk-logo-min-height: 24px;

  /* =============================================================
     Sentinel固有（--stl-*）: 分類バッジ5組（Design Spec 表の実値）＋レイアウト
     ============================================================= */
  /* 🔴 要対応 */
  --stl-red-bg:    #FBEBEB;
  --stl-red-fg:    #C23B3B;
  --stl-red-glyph: #D64545;   /* 由来: --jfk-error */
  /* 🟡 本日中に対応 */
  --stl-yellow-bg:    #FCF3E2;
  --stl-yellow-fg:    #A66A17;
  --stl-yellow-glyph: #E8A33D; /* 由来: --jfk-warning */
  /* 🌙 夜分連絡 */
  --stl-night-bg:    #EAF2FA;
  --stl-night-fg:    #33719F;
  --stl-night-glyph: #3B82C4;  /* 由来: --jfk-info */
  /* 💡 ご参考 */
  --stl-ref-bg:    #F2F2F2;
  --stl-ref-fg:    #6B6B6B;
  --stl-ref-glyph: #9A9A9A;    /* 由来: --jfk-ink-3 */
  /* ⚠️ 担当未設定（白地＋破線） */
  --stl-unassigned-bg:     #FFFFFF;
  --stl-unassigned-border: #D4D4D4;  /* 破線 1.5px */
  --stl-unassigned-fg:     #6B6B6B;
  --stl-unassigned-glyph:  #E8A33D;  /* 由来: --jfk-warning */

  /* バッジ・部品規格（指示書§4／Spec） */
  --stl-badge-h: 22px;
  --stl-badge-pad-x: 10px;
  --stl-badge-glyph-gap: 6px;
  --stl-fresh-h: 30px;
  --stl-check-size: 22px;

  /* コンテナ（営業960／管理職1120・Spec） */
  --stl-container-sales: 960px;
  --stl-container-mgmt: 1120px;

  /* リスト行 grid（34/122/1fr/148/132・gap12・Spec） */
  --stl-row-grid: 34px 122px 1fr 148px 132px;
  --stl-row-gap: 12px;

  /* 鮮度切れ（琥珀・Spec: 地#FDF6EC/枠#E8C88F/文字#8A5A12） */
  --stl-stale-bg: #FDF6EC;
  --stl-stale-border: #E8C88F;
  --stl-stale-fg: #8A5A12;

  /* 経過営業日の強調（2営業日以上・Spec） */
  --stl-elapsed-hot: #C23B3B;

  /* 動き（指示書§3: 200〜350ms・消し込み620ms・達成 1s/0.45s） */
  --stl-dur-fast: 200ms;
  --stl-dur-std: 250ms;
  --stl-dur-slow: 350ms;
  --stl-dur-strike: 620ms;
  --stl-dur-roof: 1s;
  --stl-dur-pop: 0.45s;
}

/* Reduced-motion（effects.css のDS共通ルールを転記） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}