/* ═══════════════════════════════════════════════════════════════════
   Simple Stuff Dark — 共通デザインシステム v1.0.0
   手本: resend.com（静かなダーク・ラベル小・数字主役・色は信号のみ）

   ── 使い方（各アプリ共通・3ステップ）──────────────────────────
   1. <head> に:  <link rel="stylesheet" href="/assets/ss-dark.css">
   2. sw.js の CACHE_URLS に追加:
        '/assets/ss-dark.css',
        '/assets/fonts/GeistMono-Regular.woff2',
        '/assets/fonts/GeistMono-Medium.woff2',
        '/assets/fonts/Geist-Regular.woff2',
        '/assets/fonts/Geist-Medium.woff2',
        '/assets/fonts/Geist-SemiBold.woff2'
   3. アプリ側は var(--ss-*) トークンと .ss-* 部品を使う。
      アプリ固有のスタイルは各HTMLの <style> に置く（上書きOK）。

   ── 4つの規律 ────────────────────────────────────────────────
   ① 数字を主役に大きく（Geist Mono + tnum）
   ② ラベルは極小・大文字・ミュート（11px / .09em / #6B6B6E）
   ③ 色は信号のみ。アクセント空色1色＋状態色(ok/warn/bad)。装飾色・グロー禁止
   ④ 余白を広く、境界は髪の毛1本(hairline)。フォーカスは光らせず細いリング
   ═══════════════════════════════════════════════════════════════════ */

/* ── フォント（自己ホスト・第三者リクエストなし）── */
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/GeistMono-Regular.woff2') format('woff2');}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/GeistMono-Medium.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/Geist-Regular.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/Geist-Medium.woff2') format('woff2');}
@font-face{font-family:'Geist';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/Geist-SemiBold.woff2') format('woff2');}

/* ── デザイントークン ── */
:root{
  /* surfaces */
  --ss-bg:#000000;                          /* 純黒キャンバス */
  --ss-surface:#0A0A0A;                     /* カード */
  --ss-surface-2:#111113;                   /* 入力欄・一段上 */
  --ss-surface-3:#161618;                   /* hover・選択面 */
  --ss-border:rgba(255,255,255,.09);        /* hairline */
  --ss-border-strong:rgba(255,255,255,.16); /* 強調境界・hover */
  --ss-sheen:inset 0 1px 0 rgba(255,255,255,.04); /* カード上端の微光 */
  /* text */
  --ss-text:#EDEDED;                        /* 本文・数字 */
  --ss-text-2:#A1A1A1;                      /* 補助 */
  --ss-label:#6B6B6E;                       /* 極小ラベル */
  /* signal（アクセント1色＋状態色のみ）*/
  --ss-accent:#38BDF8;
  --ss-accent-soft:rgba(56,189,248,.10);
  --ss-ok:#4ADE80;   --ss-ok-soft:rgba(74,222,128,.10);
  --ss-warn:#F59E0B; --ss-warn-soft:rgba(245,158,11,.10);
  --ss-bad:#F87171;  --ss-bad-soft:rgba(248,113,113,.10);
  /* type / shape */
  --ss-sans:'Geist','Hiragino Sans','Noto Sans JP',sans-serif;
  --ss-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,Consolas,'Noto Sans JP',monospace;
  --ss-radius:14px;
  --ss-radius-sm:10px;
  --ss-ring:0 0 0 3px rgba(56,189,248,.22); /* フォーカスリング（グロー禁止の代替）*/
}

/* ── 基本部品 ── */
.ss-card{background:var(--ss-surface);border:1px solid var(--ss-border);border-radius:var(--ss-radius);box-shadow:var(--ss-sheen);padding:18px}
.ss-heading{font-family:var(--ss-sans);font-weight:600;color:var(--ss-text);letter-spacing:-.02em}
.ss-label{font-family:var(--ss-mono);font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--ss-label)}
.ss-value{font-family:var(--ss-mono);font-feature-settings:'tnum' 1;font-size:40px;font-weight:500;color:var(--ss-text);letter-spacing:-.02em;line-height:1.1}
.ss-value small{font-size:15px;font-weight:400;color:var(--ss-text-2);letter-spacing:0;margin-left:4px}
.ss-mono{font-family:var(--ss-mono);font-feature-settings:'tnum' 1}
.ss-sans{font-family:var(--ss-sans)}

/* ボタン: primary=白（Resend流）。アクセントは面で使わない */
.ss-btn{font-family:var(--ss-mono);border:none;border-radius:var(--ss-radius-sm);padding:11px 22px;font-size:14px;font-weight:500;cursor:pointer;transition:background .15s,border-color .15s,color .15s}
.ss-btn--primary{background:#EDEDED;color:#0A0A0A}
.ss-btn--primary:hover{background:#FFFFFF}
.ss-btn--primary:disabled{background:var(--ss-border);color:rgba(255,255,255,.25);cursor:not-allowed}
.ss-btn--ghost{background:transparent;border:1px solid var(--ss-border);color:var(--ss-text-2)}
.ss-btn--ghost:hover{border-color:var(--ss-border-strong);color:var(--ss-text)}

/* 入力 */
.ss-input{width:100%;font-family:var(--ss-mono);font-feature-settings:'tnum' 1;font-size:16px;background:var(--ss-surface-2);border:1px solid rgba(255,255,255,.12);border-radius:var(--ss-radius-sm);padding:10px 12px;color:var(--ss-text);outline:none;transition:border-color .15s,box-shadow .15s}
.ss-input:focus{border-color:var(--ss-accent);box-shadow:var(--ss-ring)}

/* ステータスピル（Resend の Complained/Delivered 風）*/
.ss-pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--ss-mono);font-size:12px;font-weight:500;border-radius:999px;padding:3px 10px;border:1px solid}
.ss-pill--ok{color:var(--ss-ok);background:var(--ss-ok-soft);border-color:rgba(74,222,128,.25)}
.ss-pill--warn{color:var(--ss-warn);background:var(--ss-warn-soft);border-color:rgba(245,158,11,.25)}
.ss-pill--bad{color:var(--ss-bad);background:var(--ss-bad-soft);border-color:rgba(248,113,113,.25)}
.ss-pill--accent{color:var(--ss-accent);background:var(--ss-accent-soft);border-color:rgba(56,189,248,.25)}

/* 状態ドット（リスト行の先頭に）*/
.ss-dot{display:inline-block;width:6px;height:6px;border-radius:50%;vertical-align:middle}
.ss-dot--ok{background:var(--ss-ok)}
.ss-dot--warn{background:var(--ss-warn)}
.ss-dot--bad{background:var(--ss-bad)}
.ss-dot--accent{background:var(--ss-accent)}

/* 区切り線 */
.ss-hairline{border:0;border-top:1px solid var(--ss-border)}

/* ヒーロー統計カード用の柔らかい発光背景（Resend DELIVERABILITY 風・控えめに1箇所だけ）*/
.ss-glow--accent{background:radial-gradient(120% 90% at 85% 0%,rgba(56,189,248,.08),transparent 60%),var(--ss-surface)}
.ss-glow--ok{background:radial-gradient(120% 90% at 85% 0%,rgba(74,222,128,.08),transparent 60%),var(--ss-surface)}

/* ── リッチ表現: ホログラフィックなグラデ見出し（Resend "Integrate this weekend" 風）──
   ⚠️ 必要最小限の規律: 1画面につき主見出し1箇所だけ。数字・本文・UIラベル・ボタンには使わない。
   白 → ラベンダー → 空色。子要素の color 指定は text-fill 継承で自動的に透過する。 */
.ss-gradient-text{
  background:linear-gradient(105deg,#EDEDED 0%,#C4B5FD 46%,#7DD3FC 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.ss-gradient-text *{-webkit-text-fill-color:transparent;color:transparent;}
