/* Warmth Protocol — 共有デザインシステム（CUI / 黒×白・クリーン） */
/* DESIGN.md 準拠。全ページが読み込む。色・余白・角丸は必ずこのトークンを使う。 */
/* 配色は白オンブラックのモノクロ。色は「エラー＝赤」だけ例外的に許可（端末の慣例）。 */

:root{
  /* color（モノクロ） */
  --bg:#000000; --bg-elev:#060607; --bg-elev-2:#0d0d11;
  --line:#26262c; --line-strong:#45454e;
  --text:#e9e9ee; --muted:#9a9aa3; --faint:#55555c;
  --accent:#ffffff; --accent-ink:#000000; --accent-dim:#c9c9d0;
  --warm:#ffffff; --warm-ink:#000000; --warm-dim:#9a9aa3;
  --danger:#ff7d7d; --danger-ink:#180606; --ok:#ffffff;
  --ring:0 0 0 2px rgba(255,255,255,.6);
  --ring-danger:0 0 0 2px rgba(255,125,125,.5);

  /* type（CUI＝等幅。日本語は等幅スタックのJPフォールバックで描画） */
  --sans:"SFMono-Regular",Consolas,"DejaVu Sans Mono","Roboto Mono",ui-monospace,
    "Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,monospace;
  --mono:"SFMono-Regular",Consolas,"DejaVu Sans Mono","Roboto Mono",ui-monospace,monospace;
  --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:26px; --fs-2xl:34px;

  /* space */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* radius（クリーン＝ほぼ角・最小限）／影なし／モーション */
  --r-sm:2px; --r-md:3px; --r-lg:5px; --r-pill:999px;
  --sh-1:none; --sh-2:none;
  --ease:cubic-bezier(.2,.8,.2,1); --dur:.12s;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg); color:var(--text);
  font-family:var(--mono); font-size:var(--fs-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* タイポ補助 */
.label{font-family:var(--mono);font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mono{font-family:var(--mono)}
.muted{color:var(--muted)} .faint{color:var(--faint)}
h1,h2,h3{line-height:1.25;margin:0;font-weight:700;font-family:var(--mono);letter-spacing:.02em}

/* フォーカス（消さない・白リング） */
:focus{outline:none}
:focus-visible{box-shadow:var(--ring);border-radius:var(--r-sm)}

/* カード（黒地＋細い白罫線・影なし） */
.card{
  background:var(--bg-elev); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:var(--s5);
}

/* ボタン */
.btn{
  --bg-btn:var(--accent); --fg-btn:var(--accent-ink);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;padding:0 var(--s5);
  font-family:var(--mono);font-size:var(--fs-base);font-weight:700;letter-spacing:.04em;
  color:var(--fg-btn);background:var(--bg-btn);
  border:1px solid var(--accent);border-radius:var(--r-md);cursor:pointer;
  transition:background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
  user-select:none;
}
.btn:hover{background:#d3d3da}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{box-shadow:var(--ring)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none}
.btn.is-loading{color:transparent;position:relative;pointer-events:none}
.btn.is-loading::after{
  content:"";position:absolute;width:16px;height:16px;border-radius:50%;
  border:2px solid rgba(0,0,0,.35);border-top-color:#000;animation:wp-spin .7s linear infinite;
}
.btn-ghost{--bg-btn:transparent;--fg-btn:var(--text);border-color:var(--line-strong)}
.btn-ghost:hover{background:rgba(255,255,255,.06)}
.btn-danger{--bg-btn:transparent;--fg-btn:var(--danger);border-color:#5a2a2a}
.btn-danger:hover{background:rgba(255,125,125,.08)}
.btn-block{width:100%}

/* 入力・フィールド */
.field{display:block;margin-bottom:var(--s4)}
.field > .label{display:block;margin-bottom:var(--s2)}
.input{
  width:100%;min-height:48px;padding:var(--s3) var(--s4);
  background:var(--bg-elev-2);color:var(--text);
  border:1px solid var(--line-strong);border-radius:var(--r-md);
  font-family:var(--mono);font-size:var(--fs-md);
  transition:border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.input::placeholder{color:var(--faint)}
.input:focus{border-color:var(--accent);box-shadow:var(--ring)}
.input[aria-invalid="true"]{border-color:var(--danger)}
.input[aria-invalid="true"]:focus{box-shadow:var(--ring-danger)}
.field-error{margin-top:var(--s2);color:var(--danger);font-size:var(--fs-sm);min-height:1.1em}
.field-hint{margin-top:var(--s2);color:var(--faint);font-size:var(--fs-sm)}

/* 状態通知 */
.note{border:1px solid var(--line);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:var(--fs-sm)}
.note-ok{border-color:var(--line-strong);color:var(--text)}
.note-error{border-color:#5a2a2a;color:var(--danger)}
.note-muted{color:var(--muted)}

/* スケルトン（loading） */
.skeleton{background:linear-gradient(90deg,var(--bg-elev-2) 25%,#17171c 37%,var(--bg-elev-2) 63%);
  background-size:400% 100%;animation:wp-shimmer 1.4s ease infinite;border-radius:var(--r-sm)}

@keyframes wp-spin{to{transform:rotate(360deg)}}
@keyframes wp-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important}
}