/* ============================================================================
   蛍 — HOTARU  デザインシステム  v1.0.0
   ----------------------------------------------------------------------------
   PORTAL系（澪）に属さない個人ツールのための配色・素材・操作語彙。

   中心概念は「押せるものだけが光る」。
     暗モード … ミントの発光そのもの
     明モード … 差し色を帯びた影と輪郭リング（発光は明るい地では読めないため）
   規則は同じで、表現手段だけがモードで入れ替わる。

   地の素材
     暗モード … 素の黒
     明モード … 生成りの和紙（繊維＝楮と雁皮の中間／金砂子＝中密度）

   使い方
     1. このファイルをコピーし、アプリ自身のCSSより先に読み込む
     2. <html> の data-theme に "light" / "dark" を入れる
     3. 属性が無ければ OS の設定に従う

   詳しい規約は同じフォルダの AGENTS.md を読むこと。
   ============================================================================ */


/* ============================================================================
   1. 素材レイヤー（明モードの和紙）
   ----------------------------------------------------------------------------
   金砂子は乱数の閾値では粒が安定して出ないため、粒を1つずつ明示配置している。
   SVGフィルタで散らす方式は試して全滅した。密度を変えるときはタイルを足し引きする。
   3枚のタイルは辺の長さを互いにずらしてあり、重ねても並びの周期が見えない。
   ============================================================================ */
:root {
  --washi-fiber: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='460' height='460'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.014 0.54' numOctaves='3' seed='13'/%3E%3CfeColorMatrix values='0 0 0 0 0.58 0 0 0 0 0.52 0 0 0 0 0.40 0 0 0 0.72 -0.46'/%3E%3C/filter%3E%3Crect width='460' height='460' filter='url(%23f)'/%3E%3C/svg%3E");
  --washi-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23g)' opacity='0.07'/%3E%3C/svg%3E");
  --washi-kin-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cellipse cx='58' cy='401' rx='2.4' ry='1.2' fill='%23C9A227' transform='rotate(28 58 401)'/%3E%3Cellipse cx='176' cy='92' rx='1.6' ry='1.0' fill='%23DFC276' transform='rotate(-14 176 92)'/%3E%3Cellipse cx='312' cy='529' rx='2.9' ry='1.4' fill='%23B8912F' transform='rotate(52 312 529)'/%3E%3Cellipse cx='441' cy='233' rx='1.3' ry='0.9' fill='%23E8D394'/%3E%3Cellipse cx='505' cy='647' rx='2.1' ry='1.1' fill='%23C9A227' transform='rotate(-38 505 647)'/%3E%3Cellipse cx='638' cy='151' rx='1.8' ry='1.0' fill='%23A8801F' transform='rotate(15 638 151)'/%3E%3Cellipse cx='259' cy='318' rx='1.4' ry='0.9' fill='%23DFC276' transform='rotate(70 259 318)'/%3E%3C/svg%3E");
  --washi-kin-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='610' height='530'%3E%3Cellipse cx='94' cy='196' rx='1.9' ry='1.1' fill='%23C9A227' transform='rotate(-52 94 196)'/%3E%3Cellipse cx='233' cy='468' rx='1.2' ry='0.9' fill='%23E8D394'/%3E%3Cellipse cx='390' cy='73' rx='2.6' ry='1.3' fill='%23B8912F' transform='rotate(38 390 73)'/%3E%3Cellipse cx='466' cy='352' rx='1.5' ry='1.0' fill='%23DFC276' transform='rotate(-8 466 352)'/%3E%3Cellipse cx='562' cy='188' rx='2.0' ry='1.1' fill='%23A8801F' transform='rotate(62 562 188)'/%3E%3Cellipse cx='127' cy='412' rx='1.3' ry='0.9' fill='%23C9A227'/%3E%3Cellipse cx='321' cy='262' rx='1.7' ry='1.0' fill='%23DFC276' transform='rotate(-30 321 262)'/%3E%3C/svg%3E");
  --washi-mottle:
    radial-gradient(360px 210px at 24% 10%, rgba(150,132,96,.075), transparent 68%),
    radial-gradient(320px 190px at 78% 80%, rgba(150,132,96,.06), transparent 66%);
}


/* ============================================================================
   2. モードに依らない値
   ============================================================================ */
:root {
  /* 和文はWindows標準の游書体で完結させる（同梱不要・完全オフライン）。
     見出しだけ明朝にして手仕事の手触りを出す。 */
  --font-ui:      "Yu Gothic UI", "Yu Gothic", "Meiryo", system-ui, sans-serif;
  --font-display: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --font-mono:    "Consolas", "Courier New", monospace;

  --radius:    10px;
  --radius-sm:  8px;
  --radius-xs:  6px;

  --gap:      10px;
  --pad-bar: 10px 13px;

  --ease: .14s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================================
   3. 明モード — 生成りの和紙（既定）
   ============================================================================ */
:root {
  --bg: #FBF7EE;
  --bg-image: var(--washi-kin-a), var(--washi-kin-b),
              var(--washi-fiber), var(--washi-grain), var(--washi-mottle);

  --surface:        #FFFFFF;
  --surface-2:      #FBF9F4;
  --surface-border: #E6DFCF;
  --surface-shadow: 0 1px 2px rgba(70,60,35,.06);

  --text:      #1D1A13;
  --text-soft: #6A6455;

  /* 面と文字には深いミント。淡いミントは光の余韻（リング・ハロー）専用。
     #45E0C0 は白地では明るすぎて文字にも面にも使えないため。 */
  --accent:      #0B8E77;
  --accent-ink:  #FFFFFF;
  --accent-halo: rgba(69,224,192,.38);
  --accent-tint: rgba(11,142,119,.11);
  --accent-text: #07715F;

  --btn-bg:           #FFFFFF;
  --btn-text:         #26231A;
  --btn-border:       #E0D8C5;
  --btn-shadow:       0 1px 1px rgba(70,60,35,.05);
  --btn-bg-hover:     #F1FBF7;
  --btn-border-hover: rgba(11,142,119,.55);

  --field-bg:     #FFFFFF;
  --field-border: #E0D8C5;

  --drop-border: #C9BFA6;
  --drop-bg:     rgba(255,255,255,.26);

  --recess-bg:     #F1ECE0;   /* 画像やサムネイルを置く凹み */
  --recess-border: #E3DBC9;
  --recess-shadow: 0 1px 4px rgba(70,60,35,.16);

  --danger:      #A8382B;
  --danger-tint: rgba(168,56,43,.10);
  --ok:          #0B8E77;
  --ok-bg:       rgba(11,142,119,.07);
  --ok-border:   rgba(11,142,119,.28);

  --overlay:   rgba(251,247,238,.74);
  --mark-glow: 0 0 9px rgba(69,224,192,.75);

  /* 押せることの示し方（明＝リングと影） */
  --lift-primary: 0 2px 10px rgba(11,142,119,.30), 0 0 0 3px var(--accent-halo);
  --lift-hover:   0 0 0 3px rgba(69,224,192,.20);
  --lift-select:  0 0 0 3px var(--accent-halo);

  color-scheme: light;
}


/* ============================================================================
   4. 暗モード — 蛍
   ----------------------------------------------------------------------------
   ★ 以下の2ブロックは中身が完全に同一。片方だけ直すと必ず壊れる。
     ・1つめ … OS設定が暗のとき（利用者が明を選んでいれば適用しない）
     ・2つめ … 利用者が明示的に暗を選んだとき（OS設定より優先）
   トークンを足すときは両方に同じ行を足すこと。
   ============================================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #08090C;
    --bg-image: none;

    --surface:        #101319;
    --surface-2:      #151A22;
    --surface-border: #1E232C;
    --surface-shadow: none;

    --text:      #E8EBF0;
    --text-soft: #8992A3;

    --accent:      #45E0C0;
    --accent-ink:  #022019;
    --accent-halo: rgba(69,224,192,.30);
    --accent-tint: rgba(69,224,192,.13);
    --accent-text: #6FEBD1;

    --btn-bg:           #151A22;
    --btn-text:         #C4CDDA;
    --btn-border:       #232935;
    --btn-shadow:       none;
    --btn-bg-hover:     #1B2430;
    --btn-border-hover: rgba(69,224,192,.5);

    --field-bg:     #0A0C10;
    --field-border: #232935;

    --drop-border: #2A3340;
    --drop-bg:     rgba(69,224,192,.028);

    --recess-bg:     #06070A;
    --recess-border: #1A1F28;
    --recess-shadow: 0 2px 8px rgba(0,0,0,.55);

    --danger:      #F2705C;
    --danger-tint: rgba(242,112,92,.12);
    --ok:          #45E0C0;
    --ok-bg:       rgba(69,224,192,.07);
    --ok-border:   rgba(69,224,192,.26);

    --overlay:   rgba(8,9,12,.74);
    --mark-glow: 0 0 10px rgba(69,224,192,.9);

    /* 押せることの示し方（暗＝発光） */
    --lift-primary: 0 0 18px rgba(69,224,192,.42);
    --lift-hover:   0 0 14px rgba(69,224,192,.14);
    --lift-select:  0 0 0 1px var(--accent), 0 0 20px rgba(69,224,192,.30);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #08090C;
  --bg-image: none;

  --surface:        #101319;
  --surface-2:      #151A22;
  --surface-border: #1E232C;
  --surface-shadow: none;

  --text:      #E8EBF0;
  --text-soft: #8992A3;

  --accent:      #45E0C0;
  --accent-ink:  #022019;
  --accent-halo: rgba(69,224,192,.30);
  --accent-tint: rgba(69,224,192,.13);
  --accent-text: #6FEBD1;

  --btn-bg:           #151A22;
  --btn-text:         #C4CDDA;
  --btn-border:       #232935;
  --btn-shadow:       none;
  --btn-bg-hover:     #1B2430;
  --btn-border-hover: rgba(69,224,192,.5);

  --field-bg:     #0A0C10;
  --field-border: #232935;

  --drop-border: #2A3340;
  --drop-bg:     rgba(69,224,192,.028);

  --recess-bg:     #06070A;
  --recess-border: #1A1F28;
  --recess-shadow: 0 2px 8px rgba(0,0,0,.55);

  --danger:      #F2705C;
  --danger-tint: rgba(242,112,92,.12);
  --ok:          #45E0C0;
  --ok-bg:       rgba(69,224,192,.07);
  --ok-border:   rgba(69,224,192,.26);

  --overlay:   rgba(8,9,12,.74);
  --mark-glow: 0 0 10px rgba(69,224,192,.9);

  --lift-primary: 0 0 18px rgba(69,224,192,.42);
  --lift-hover:   0 0 14px rgba(69,224,192,.14);
  --lift-select:  0 0 0 1px var(--accent), 0 0 20px rgba(69,224,192,.30);

  color-scheme: dark;
}


/* ============================================================================
   5. 素の要素
   ============================================================================ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  background-image: var(--bg-image);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.7;
}

h1, h2, h3 { font-family: var(--font-display); letter-spacing: .04em; }

a { color: var(--accent-text); }

::selection { background: var(--accent-tint); }

:where(button, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}


/* ============================================================================
   6. 部品
   ----------------------------------------------------------------------------
   接頭辞 hs- は HOTARU System の略。アプリ側のクラス名と衝突させないため。
   ============================================================================ */

/* 面 — カード・パネル・ツールバーなど、地から持ち上がるものすべて */
.hs-surface {
  background: var(--surface);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius);
  box-shadow: var(--surface-shadow);
}

/* ボタン — 既定は控えめ。光るのは主操作だけ */
.hs-btn {
  font-family: inherit; font-size: 13px; cursor: pointer;
  padding: 6px 13px; border-radius: var(--radius-sm);
  background: var(--btn-bg); color: var(--btn-text);
  border: 1px solid var(--btn-border); box-shadow: var(--btn-shadow);
  transition: background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.hs-btn:hover:not(:disabled) {
  background: var(--btn-bg-hover);
  border-color: var(--btn-border-hover);
  box-shadow: var(--lift-hover);
}
.hs-btn:disabled { opacity: .34; cursor: default; box-shadow: none; }

.hs-btn--primary {
  background: var(--accent); color: var(--accent-ink);
  border-color: var(--accent); box-shadow: var(--lift-primary);
  font-weight: 700; padding: 8px 18px;
}
.hs-btn--primary:hover:not(:disabled) {
  background: var(--accent); border-color: var(--accent);
  filter: brightness(1.06);
}

.hs-btn--danger:hover:not(:disabled) {
  color: var(--danger); border-color: var(--danger);
  background: var(--danger-tint); box-shadow: none;
}

/* 入力 */
.hs-field {
  font-family: inherit; font-size: 13px; color: var(--text);
  padding: 6px 9px; border-radius: var(--radius-sm);
  background: var(--field-bg); border: 1px solid var(--field-border);
}

/* 投入口 — ドラッグ中は hs-drop--over を足す */
.hs-drop {
  border: 1px dashed var(--drop-border);
  border-radius: var(--radius);
  background: var(--drop-bg);
  transition: border-color var(--ease), background var(--ease);
}
.hs-drop--over {
  border-color: var(--accent);
  background: var(--accent-tint);
  box-shadow: var(--lift-select);
}

/* 凹み — 画像・サムネイル・コードなど、地に沈むもの */
.hs-recess {
  background: var(--recess-bg);
  border: 1px solid var(--recess-border);
  border-radius: var(--radius-xs);
}

/* 状態を表す小片 */
.hs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: var(--radius-sm);
  background: var(--accent-tint); color: var(--accent-text);
  border: 1px solid var(--accent-halo);
  font-size: 12px; font-weight: 700;
}

/* 光る点 — 稼働中であることの印 */
.hs-mark {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); box-shadow: var(--mark-glow);
}

/* 選択中の面 */
.hs-selected {
  border-color: var(--accent) !important;
  box-shadow: var(--lift-select) !important;
}

/* 報せ */
.hs-note {
  padding: 12px 15px; border-radius: var(--radius);
  background: var(--ok-bg); border: 1px solid var(--ok-border);
  border-left: 3px solid var(--ok);
}
.hs-note--error {
  background: var(--danger-tint); border-color: var(--danger);
  border-left-color: var(--danger);
}