/*
 * Luna AI — Moonglow Design Tokens v2
 * 正本: ブランドブック「Luna AI Moonglow v2」(2026-07-16 定例で方向性合意・飯生担当で詰め中)
 *   本体: ../brand/Luna-AI-Moonglow-v2.html （2026-07-21 リポジトリに正式保存・値はこのファイルと一致確認済み）
 * 抽出日: 2026-07-18
 *
 * 哲学: 「色ではなく、光で夜を照らす。」
 *   01 静寂 SILENCE   — 主張しない。彩度ではなく輝度で語る
 *   02 輝度 LUMINANCE — 墨のような藍夜と、それを照らす真珠色の月光
 *   03 一滴 ONE DROP  — 翡翠(Jade)はシステム唯一の彩色。操作できる場所にだけ灯す
 *
 * 配分の鉄則(一滴の原則): 夜の階調 90 / 月光 9 / 翡翠 1
 *   - 翡翠(--luna-jade)は リンク・送信・アクティブ状態など操作可能な要素のみ。面には広げない
 *   - 奥行きは影ではなく発光で(box-shadowはglow用途に使う)
 *
 * 旧デザイントークン(tech/corp-design-tokens.css)との関係:
 *   - 本ファイルがLunaブランド面の新正本。旧2ファイルは他プロダクト参照があるため残置
 */

/* Google Fontsは各HTMLで非同期ロードする。@importは初回描画を直列化するため禁止。 */

:root {
  /* ───── 夜の階調 90 ───── */
  --luna-new-moon: #0C0D1A;   /* New Moon — 最深部・ページ背景 (L 0.13) */
  --luna-ink: #101223;        /* Ink — 基準背景 (L 0.16) */
  --luna-surface: #191B2C;    /* Surface — 面・カード (L 0.21) */
  --luna-surface-2: #1c1f33;  /* 無効状態の面・より浅い面 */
  --luna-raised: #242741;     /* 罫線・持ち上がった面 */
  --luna-line: #2c2f4a;       /* ボタン枠・区切り */
  --luna-line-faint: rgba(221,225,238,0.08); /* 極薄の罫 */

  /* ───── 月光 9 ───── */
  --luna-pearl: #DDE1EE;      /* Pearl — 月光・主要テキスト (L 0.90 / INKに14.2:1 AAA) */
  --luna-bright: #EEF0F6;     /* 見出し強調・最輝部 */
  --luna-text-2: #C3C6D6;     /* 第二テキスト */
  --luna-mist: #8A8EA6;       /* Mist — 補助テキスト (L 0.62 / 5.7:1 AA) */
  --luna-faint: #8A8EA6;      /* 弱テキスト・無効文字（暗背景でAA可読性を確保） */
  --luna-moonlight: rgba(200,212,238,0.13); /* 月体の発光(radial中心) */

  /* ───── 翡翠 1 — 操作可能な要素のみ ───── */
  --luna-jade: #A5DDD6;       /* Jade Whisper — 唯一の色 (12.3:1 AAA) */
  --luna-jade-bright: #C7ECE7;   /* hover文字 */
  --luna-jade-border: rgba(165,221,214,0.35);
  --luna-jade-tint: rgba(165,221,214,0.08);   /* hover背景 */
  --luna-jade-ring: rgba(165,221,214,0.2);    /* focusリング */
  --luna-jade-glow: rgba(165,221,214,0.85);   /* primaryボタンの発光 */
  --luna-on-jade: #0F1020;    /* 翡翠面上の文字 */

  /* ───── 書体 ───── */
  --luna-font-display: 'Marcellus', serif;                       /* 欧文見出し・ロゴタイプ */
  --luna-font-jp-display: 'Hiragino Mincho ProN', 'Yu Mincho', YuMincho, serif; /* 和文は端末標準で通信ゼロ */
  --luna-font-body: 'Space Grotesk', 'Hiragino Sans', 'Yu Gothic', YuGothic, -apple-system, BlinkMacSystemFont, sans-serif; /* 欧文Google＋和文system */
  --luna-font-label: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; /* ラベル10-12px/tracking +0.30em */

  /* ───── 型スケール(カンプ準拠) ───── */
  --luna-display-size: 52px;  --luna-display-lh: 1.1;   /* Marcellus */
  --luna-headline-size: 30px; --luna-headline-lh: 1.5;  /* しっぽり明朝600 +4% */
  --luna-body-size: 16px;     --luna-body-lh: 1.9;

  /* ───── 角丸・発光 ───── */
  --luna-radius-pill: 999px;  /* ボタンはピル */
  --luna-radius-card: 16px;
  --luna-radius-icon: 28%;    /* アプリアイコンの角丸 */
  --luna-glow-primary: 0 0 18px -5px var(--luna-jade-glow);
  --luna-glow-focus: 0 0 0 3px var(--luna-jade-ring);

  /* ───── Neural Ink v1 — Portal / Web / Chat / Quest共通の操作文法 ───── */
  --luna-neural-night: #071426;
  --luna-neural-ink: #0A1B30;
  --luna-neural-surface: rgba(12, 32, 55, .86);
  --luna-neural-surface-raised: rgba(16, 41, 68, .94);
  --luna-neural-line: rgba(207, 228, 226, .14);
  --luna-neural-line-strong: rgba(207, 228, 226, .24);
  --luna-neural-text: #EFF4F2;
  --luna-neural-text-2: #B7C7C8;
  --luna-neural-text-3: #7F999E;
  --luna-state-violet: #8F9CFF;
  --luna-state-amber: #E2C782;
  --luna-state-danger: #EDA6A6;
  --luna-space-1: 4px;
  --luna-space-2: 8px;
  --luna-space-3: 12px;
  --luna-space-4: 16px;
  --luna-space-5: 24px;
  --luna-space-6: 32px;
  --luna-radius-compact: 8px;
  --luna-radius-control: 12px;
  --luna-radius-overlay: 18px;
  --luna-shadow-rest: 0 1px 0 rgba(255, 255, 255, .025) inset, 0 20px 54px rgba(1, 9, 20, .24);
  --luna-shadow-overlay: 0 1px 0 rgba(255, 255, 255, .045) inset, 0 28px 80px rgba(1, 9, 20, .36), 0 0 0 1px rgba(165, 221, 214, .025);
  --luna-motion-fast: 140ms;
  --luna-motion-standard: 240ms;
  --luna-motion-scene: 520ms;
  --luna-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ───── 基本要素 ───── */
.luna-base {
  background: var(--luna-new-moon);
  color: var(--luna-pearl);
  font-family: var(--luna-font-body);
  font-size: var(--luna-body-size);
  line-height: var(--luna-body-lh);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}
.luna-base ::selection { background: rgba(165,221,214,0.28); color: #F1F3F9; }
.luna-base a { color: var(--luna-jade); text-decoration: none; border-bottom: 1px solid var(--luna-jade-border); }
.luna-base a:hover { color: var(--luna-jade-bright); border-bottom-color: rgba(199,236,231,0.7); }

/* ───── ボタン(5状態・カンプ実測) ───── */
.luna-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--luna-font-body); font-size: 13px; font-weight: 600;
  padding: 11px 24px; border-radius: var(--luna-radius-pill);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform .3s, box-shadow .3s, background .2s, color .2s, border-color .2s;
}
.luna-btn-primary { background: var(--luna-jade); color: var(--luna-on-jade); box-shadow: var(--luna-glow-primary); }
.luna-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 26px -5px var(--luna-jade-glow); }
.luna-btn-secondary { background: transparent; border-color: var(--luna-line); color: var(--luna-text-2); }
.luna-btn-secondary:hover { border-color: var(--luna-jade-border); background: var(--luna-jade-tint); color: var(--luna-jade); }
.luna-btn:focus-visible { outline: none; border-color: rgba(165,221,214,0.5); box-shadow: var(--luna-glow-focus); }
.luna-btn[disabled], .luna-btn-disabled { background: var(--luna-surface-2); border-color: var(--luna-raised); color: var(--luna-faint); cursor: not-allowed; box-shadow: none; }

/* ───── ラベル(Space Mono +30%) ───── */
.luna-label {
  font-family: var(--luna-font-label); font-size: 11px;
  letter-spacing: 0.30em; text-transform: uppercase; color: var(--luna-mist);
}

/* ───── カード ───── */
.luna-card {
  background: var(--luna-surface);
  border: 1px solid var(--luna-raised);
  border-radius: var(--luna-radius-card);
}

/* ───── 月(Full Orb)の描画 — 発光は控えめに ───── */
.luna-orb {
  border-radius: 50%;
  background: radial-gradient(circle at 42% 38%, rgba(238,240,246,0.95), #C8D4EE 34%, #9AA4C4 68%, #6E7694 100%);
  box-shadow: 0 0 60px 0 var(--luna-moonlight);
}

/* ───── アニメーション(カンプ準拠・reduced-motion対応) ───── */
@keyframes luna-twinkle { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes luna-breathe { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: .9; } }
@keyframes luna-floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .luna-base * { animation: none !important; } }