/* =============================================================================
   radix-tokens.css — Radix UI 由来の共通デザイントークン
   -----------------------------------------------------------------------------
   Radix Themes / Radix Colors (light, scaling=1, radius=medium) の公式値を
   素の HTML+CSS で再現するためのトークン集。React 非依存。
   管理ポータル(index.html)とオペレーター画面(operator.html)で共有する。
   値の出典: @radix-ui/colors / @radix-ui/themes(GitHub) の公式 CSS。
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     Radix Colors — Gray (light)
     1-2:背景 / 3-5:UI背景 / 6-8:罫線 / 9-10:ソリッド / 11-12:テキスト
     --------------------------------------------------------------------------- */
  --gray-1:  #fcfcfc;
  --gray-2:  #f9f9f9;
  --gray-3:  #f0f0f0;
  --gray-4:  #e8e8e8;
  --gray-5:  #e0e0e0;
  --gray-6:  #d9d9d9;
  --gray-7:  #cecece;
  --gray-8:  #bbbbbb;
  --gray-9:  #8d8d8d;
  --gray-10: #838383;
  --gray-11: #646464;
  --gray-12: #202020;

  --gray-a1:  #00000003;
  --gray-a2:  #00000006;
  --gray-a3:  #0000000f;
  --gray-a4:  #00000017;
  --gray-a5:  #0000001f;
  --gray-a6:  #00000026;
  --gray-a7:  #00000031;
  --gray-a8:  #00000044;
  --gray-a9:  #00000072;
  --gray-a10: #0000007c;
  --gray-a11: #0000009b;
  --gray-a12: #000000df;

  /* Black alpha (light/dark 共通) — shadow / overlay 用 */
  --black-a1:  rgba(0, 0, 0, 0.05);
  --black-a2:  rgba(0, 0, 0, 0.10);
  --black-a3:  rgba(0, 0, 0, 0.15);
  --black-a4:  rgba(0, 0, 0, 0.20);
  --black-a5:  rgba(0, 0, 0, 0.30);
  --black-a6:  rgba(0, 0, 0, 0.40);
  --black-a7:  rgba(0, 0, 0, 0.50);
  --black-a8:  rgba(0, 0, 0, 0.60);
  --black-a9:  rgba(0, 0, 0, 0.70);
  --black-a10: rgba(0, 0, 0, 0.80);
  --black-a11: rgba(0, 0, 0, 0.90);
  --black-a12: rgba(0, 0, 0, 0.95);

  /* ---------------------------------------------------------------------------
     Radix Colors — Blue (accent)
     --------------------------------------------------------------------------- */
  --blue-1:  #fbfdff;
  --blue-2:  #f4faff;
  --blue-3:  #e6f4fe;
  --blue-4:  #d5efff;
  --blue-5:  #c2e5ff;
  --blue-6:  #acd8fc;
  --blue-7:  #8ec8f6;
  --blue-8:  #5eb1ef;
  --blue-9:  #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;

  /* ---------------------------------------------------------------------------
     Radix Colors — Red (danger)
     --------------------------------------------------------------------------- */
  --red-1:  #fffcfc;
  --red-2:  #fff7f7;
  --red-3:  #feebec;
  --red-4:  #ffdbdc;
  --red-5:  #ffcdce;
  --red-6:  #fdbdbe;
  --red-7:  #f4a9aa;
  --red-8:  #eb8e90;
  --red-9:  #e5484d;
  --red-10: #dc3e42;
  --red-11: #ce2c31;
  --red-12: #641723;

  /* ---------------------------------------------------------------------------
     Radix Colors — Amber (warning)
     --------------------------------------------------------------------------- */
  --amber-1:  #fefdfb;
  --amber-2:  #fefbe9;
  --amber-3:  #fff7c2;
  --amber-4:  #ffee9c;
  --amber-5:  #fbe577;
  --amber-6:  #f3d673;
  --amber-7:  #e9c162;
  --amber-8:  #e2a336;
  --amber-9:  #ffc53d;
  --amber-10: #ffba18;
  --amber-11: #ab6400;
  --amber-12: #4f3422;

  /* ---------------------------------------------------------------------------
     Radix Colors — Green (success)
     --------------------------------------------------------------------------- */
  --green-1:  #fbfefc;
  --green-2:  #f4fbf6;
  --green-3:  #e6f6eb;
  --green-4:  #d6f1df;
  --green-5:  #c4e8d1;
  --green-6:  #adddc0;
  --green-7:  #8eceaa;
  --green-8:  #5bb98b;
  --green-9:  #30a46c;
  --green-10: #2b9a66;
  --green-11: #218358;
  --green-12: #193b2d;

  /* ---------------------------------------------------------------------------
     Spacing scale (Radix Themes, scaling=1)
     --------------------------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 48px;
  --space-9: 64px;

  /* ---------------------------------------------------------------------------
     Radius scale (radius=medium → factor 1)
     --------------------------------------------------------------------------- */
  --radius-1: 3px;
  --radius-2: 4px;
  --radius-3: 6px;
  --radius-4: 8px;
  --radius-5: 12px;
  --radius-6: 16px;
  --radius-full: 9999px;

  /* ---------------------------------------------------------------------------
     Typography scale (size / line-height ペア)
     --------------------------------------------------------------------------- */
  --font-size-1: 12px;  --line-height-1: 16px;
  --font-size-2: 14px;  --line-height-2: 20px;
  --font-size-3: 16px;  --line-height-3: 24px;
  --font-size-4: 18px;  --line-height-4: 26px;
  --font-size-5: 20px;  --line-height-5: 28px;
  --font-size-6: 24px;  --line-height-6: 30px;
  --font-size-7: 28px;  --line-height-7: 36px;
  --font-size-8: 35px;  --line-height-8: 40px;
  --font-size-9: 60px;  --line-height-9: 60px;

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;

  /* フォントファミリー: Radix の system スタック + 日本語フォント */
  --default-font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    system-ui, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic",
    Meiryo, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* ---------------------------------------------------------------------------
     Shadow scale
     1:inset(凹み) / 2-3:Card / 4:Popover / 5:中overlay / 6:Dialog
     --------------------------------------------------------------------------- */
  --shadow-1:
    inset 0 0 0 1px var(--gray-a5),
    inset 0 1.5px 2px 0 var(--gray-a2),
    inset 0 1.5px 2px 0 var(--black-a2);
  --shadow-2:
    0 0 0 1px var(--gray-a3),
    0 0 0 0.5px var(--black-a1),
    0 1px 1px 0 var(--gray-a2),
    0 2px 1px -1px var(--black-a1),
    0 1px 3px 0 var(--black-a1);
  --shadow-3:
    0 0 0 1px var(--gray-a3),
    0 2px 3px -2px var(--gray-a3),
    0 3px 12px -4px var(--black-a2),
    0 4px 16px -8px var(--black-a2);
  --shadow-4:
    0 0 0 1px var(--gray-a3),
    0 8px 40px var(--black-a1),
    0 12px 32px -16px var(--gray-a3);
  --shadow-5:
    0 0 0 1px var(--gray-a3),
    0 12px 60px var(--black-a3),
    0 12px 32px -16px var(--gray-a5);
  --shadow-6:
    0 0 0 1px var(--gray-a3),
    0 12px 60px var(--black-a3),
    0 16px 64px var(--gray-a2),
    0 16px 36px -20px var(--gray-a7);

  /* ---------------------------------------------------------------------------
     意味的エイリアス（アプリ側はこちらを参照する）
     --------------------------------------------------------------------------- */
  --color-background:    var(--gray-1);
  --color-panel:         #ffffff;
  --color-panel-subtle:  var(--gray-2);
  --color-surface:       #ffffff;

  --color-text:          var(--gray-12);
  --color-text-secondary: var(--gray-11);
  --color-text-muted:    var(--gray-10);

  --color-border:        var(--gray-6);
  --color-border-strong: var(--gray-7);
  --focus-ring:          0 0 0 2px var(--blue-8);

  --accent-1:  var(--blue-1);
  --accent-2:  var(--blue-2);
  --accent-3:  var(--blue-3);
  --accent-4:  var(--blue-4);
  --accent-5:  var(--blue-5);
  --accent-6:  var(--blue-6);
  --accent-7:  var(--blue-7);
  --accent-8:  var(--blue-8);
  --accent-9:  var(--blue-9);
  --accent-10: var(--blue-10);
  --accent-11: var(--blue-11);
  --accent-12: var(--blue-12);
  --accent-contrast: #ffffff;
}

/* =============================================================================
   ベースリセット & タイポグラフィ既定
   ============================================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

.hidden {
  display: none !important;
}

/* =============================================================================
   Material Symbols — 整列ベストプラクティス
   ============================================================================= */
.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  display: inline-flex;
  vertical-align: middle;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* =============================================================================
   カスタムツールチップ（[data-tooltip]）
   ネイティブ title より即座に表示・読みやすいサイズ・Radix風の見た目
   ============================================================================= */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 9px;
  border-radius: var(--radius-2);
  background: var(--gray-12);
  color: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-medium);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  box-shadow: var(--shadow-3);
  z-index: 1000;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
}