/* ============================================================
   メルビック電工 勤怠管理システム — デザイントークン
   値の根拠は packages/design-system/BRAND-AUDIT.md を参照。
   アプリ側で色・フォントを直書きしないこと（レビューで落とす）。
   ============================================================ */

:root {
  /* --- ブランド ------------------------------------------------
     primary はサイト実測値 #255685 を採用（CSS 出現 77 回で最頻）。
     指示書の指定は #0B4C8C だったが、指示書自身の規定
     「サイトの実測値を primary に採用」に従い置換した。 */
  --mv-blue:        #255685;   /* primary。指示・見出し・選択 */
  --mv-blue-dark:   #133C64;   /* サイト実測。押下・強調 */
  --mv-blue-mid:    #3C79B4;   /* サイト実測。補助 */
  --mv-blue-tint:   #E8EEF5;   /* 選択行・ヘッダ背景 */

  --mv-ink:         #071523;   /* サイト実測。図面の線・本文 */
  /* 背景は白ベース。サイト実測は #F6F6F6 だが、本ソフトは白基調とする方針
     （BRAND-AUDIT.md §4 参照）。面で塗らず、罫線と余白で構造を出す。 */
  --mv-paper:       #FFFFFF;
  --mv-paper-2:     #F7F9FB;   /* ヘッダ帯・集計列などの控えめな塗り分けのみに使う */
  --mv-rule:        #C7C7C7;   /* サイト実測。罫線 */
  --mv-rule-soft:   #E1E7EC;   /* 罫線（弱）。グリッドの升目 */
  --mv-surface:     #FFFFFF;

  /* --- 状態色（JIS 安全色。サイトの装飾色では置き換えない） ----
     この現場では色が意味を持つ体系がすでに JIS で通っている。
     サイトのアクセント色（出現 2 回程度の装飾）に置き換えると
     「異常値を色で拾う」という本製品の中心機能が壊れる。 */
  --mv-yellow:      #F0C020;   /* 注意＝要確認・未入力・承認待ち */
  --mv-green:       #00893E;   /* 安全＝正常・承認済 */
  --mv-red:         #C8161D;   /* 禁止＝規定超過・エラー */

  --mv-yellow-bg:   #FDF6E3;
  --mv-green-bg:    #E6F4EC;
  --mv-red-bg:      #FBEAEA;

  --mv-muted:       #5A6B7A;

  /* --- タイポグラフィ ------------------------------------------
     サイト実測と一致（Zen Kaku Gothic New を自己ホスト）。差分なし。 */
  --mv-font-head: "Zen Kaku Gothic New", "Noto Sans JP", "ヒラギノ角ゴ Pro W3",
                  "メイリオ", "MS PGothic", sans-serif;
  --mv-font-body: "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "メイリオ",
                  "MS PGothic", sans-serif;
  /* 時刻・時間数は必ず等幅。桁が揃わないと月次グリッドで異常を目で拾えない */
  --mv-font-num:  "Roboto Mono", "SFMono-Regular", Consolas, monospace;

  --mv-head-weight: 700;
  --mv-body-weight: 400;
  --mv-num-weight:  500;

  /* --- 寸法 ----------------------------------------------------
     現場作業員は手袋・汚れた手でスマホを使う。タップ領域は大きく。 */
  --mv-tap-min:     48px;      /* モバイルの最小タップ領域 */
  --mv-row-h:       28px;      /* 月次グリッドの行高（Excel 相当） */
  --mv-focus:       2px solid var(--mv-blue);
  --mv-focus-offset: 2px;

  /* 角丸。図面的な硬さを残しつつ、触れる要素だけ少し丸める */
  --mv-radius:      6px;       /* カード・パネル */
  --mv-radius-sm:   4px;       /* 入力・ボタン・バッジ */
  --mv-radius-lg:   10px;      /* 大きな面 */

  /* 段差。罫線1本だけで階層を出すと平坦になりすぎるため、
     影は「浮いている」ものにだけ薄く使う。多用しない。 */
  --mv-shadow-sm:  0 1px 2px rgba(7, 21, 35, .06);
  --mv-shadow:     0 1px 2px rgba(7, 21, 35, .05), 0 4px 12px rgba(7, 21, 35, .06);
  --mv-shadow-lg:  0 2px 4px rgba(7, 21, 35, .06), 0 12px 32px rgba(7, 21, 35, .10);
  --mv-shadow-bar: 0 1px 0 var(--mv-rule-soft), 0 4px 16px rgba(7, 21, 35, .05);

  /* 状態変化。速すぎると気づかず、遅いと操作が重くなる */
  --mv-ease:       cubic-bezier(.2, .7, .3, 1);
  --mv-dur:        .14s;

  --mv-space-1: 4px;  --mv-space-2: 8px;  --mv-space-3: 12px;
  --mv-space-4: 16px; --mv-space-5: 20px; --mv-space-6: 28px;
  --mv-space-7: 40px;
}

/* --- 品質フロア --------------------------------------------- */

/* すべての要素で padding・border を幅に含める。
   これが無いと width:100% の入力欄が padding と border の分だけ親からはみ出し、
   文字が枠線に被る。グリッド内の入力欄で特に顕在化する。 */
*, *::before, *::after { box-sizing: border-box; }

/* キーボードフォーカスは必ず可視。管理担当はキーボードだけで完結する */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: var(--mv-focus);
  outline-offset: var(--mv-focus-offset);
}

/* prefers-reduced-motion を尊重。承認回路の「通電」も点灯のみになる */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 数値・時刻は等幅かつ tabular */
.mv-num, .mv-time {
  font-family: var(--mv-font-num);
  font-weight: var(--mv-num-weight);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}