/* ============================================================
   メルビック電工 勤怠管理システム — デザイントークン
   値の根拠は 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;

  /* --- 文字の大きさ ---------------------------------------------------
     業務画面なので刻みは細かい。ただし画面ごとに 10.5px / 11.5px / 12.5px …
     と好きに決めていた結果、20種類が散らばって見出しと本文の差が消えていた。
     ここに寄せる。新しい値が要るときは、まずこの表に足す。 */
  --mv-text-3xs:  9px;    /* 表の中の補助記号。これ以上小さくしない */
  --mv-text-2xs: 10px;    /* 表の見出しラベル・単位 */
  --mv-text-xs:  11px;    /* 補足・タグ */
  --mv-text-sm:  12px;    /* 表の中身・ボタン */
  --mv-text:     13px;    /* 本文の基準 */
  --mv-text-md:  15px;    /* 小見出し */
  --mv-text-lg:  17px;    /* 画面の見出し */
  --mv-text-xl:  20px;    /* 数値の強調 */
  --mv-text-2xl: 26px;    /* 残数などの主役の数値 */
  --mv-text-3xl: 34px;    /* 入口の要約 */

  /* --- 会社カレンダー・夜勤で使う紫 -------------------------------------
     有給推奨日（青）と計画年休（紫）を色相で分けるために足した色。
     画面ごとに #7B5CB8 / #4A3A78 … と直書きされていたのをここへ集約する。 */
  --mv-purple:      #7B5CB8;
  --mv-purple-dark: #4A3A78;
  --mv-purple-ink:  #3D3350;
  --mv-purple-bg:   #F4EFF9;
  --mv-purple-line: #D9CEEC;

  /* --- 有給推奨日で使う淡い青 ------------------------------------------- */
  --mv-blue-soft:   #5B93C6;
  --mv-blue-pale:   #F2F7FC;
  --mv-blue-deep:   #1D5A8C;
  --mv-blue-ink:    #14395C;
  --mv-blue-wash:   #EAF2FA;

  /* --- 状態色の濃い側（文字に使う） ------------------------------------- */
  --mv-yellow-ink:  #6B4E00;
  --mv-yellow-line: #C79A00;   /* 黄の縁。背景が淡いので線は濃くする */
  --mv-red-wash:    #FBE2E4;   /* 期限切れの行にマウスを乗せたとき */
  --mv-sat:         #2A6FA8;   /* 土曜。日曜の赤と対にする青 */
  --mv-col-holiday: #EDF1F5;   /* 表の休日列 */
  --mv-print-fill:  #EDEDED;   /* 印刷物の見出し塗り。画面用の色とは別に持つ */
  --mv-print-rest:  #F2F2F2;
  --mv-print-rule:  #444444;   /* 印刷の罫線。画面の罫線より濃くしないと出ない */
  --mv-red-ink:     #A81217;

  --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; }

/* hidden 属性は必ず効かせる。
   ブラウザ既定の [hidden]{display:none} は、あとから書いた
   `.tabs { display: flex }` のようなクラス指定に同じ詳細度で負ける。
   権限で出し分けている要素が「hidden なのに見えている」状態を作るため、
   ここで一段強くしておく。 */
[hidden] { display: none !important; }

/* キーボードフォーカスは必ず可視。管理担当はキーボードだけで完結する */
: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;
}