/* ════════════════════════════════════════════════════════════
   KASANE — 素材別 UI テーマ
   `body[data-craft-theme="ks|mu|so|ja|hm|wg|si|so|to|so|kr|bh|wa|gl|..."]`
   または親要素に data-craft-theme を付与すると、配下の
   背景・アクセント色・質感が素材イメージに自動切替。

   工芸 → テーマカテゴリ:
     ks (香川漆器), ho (本漆) → urushi (湿度・反射・艶)
     to (石燈籠), aj (庵治石)   → stone (黒・重厚・深い影)
     wp (和紙), ch (提灯)      → paper (透過・柔らかい光)
     mu (うちわ), si (一刀彫), tk (竹細工), bs (竹一刀彫) → bamboo (線・軽さ)
     ri (理平焼), kk (神懸焼), ok (岡本焼) → ceramic (土・釉薬・粒子感)
     gl (ガラス)               → glass (屈折・透明感)
═══════════════════════════════════════════════════════════ */

[data-craft-theme] {
  --accent: var(--c-gold);
  --accent-deep: var(--c-gold-deep);
  --surface: var(--c-paper);
  --surface-warm: var(--c-paper-warm);
  --on-surface: var(--c-ink);
  --on-surface-muted: var(--c-ink-muted);
  --material-overlay: linear-gradient(135deg, rgba(176,137,86,.05), rgba(176,137,86,.02));
  --material-shadow: 0 18px 50px rgba(20,17,10,.12);
  --material-pattern: none;
  --material-radius: var(--r-xl);
}

/* ─── 漆 (urushi) ───  湿度のある深い艶、ゴールド差し色 */
[data-craft-theme="ks"],
[data-craft-theme="ho"],
[data-craft-theme="urushi"] {
  --accent: #C9A66B;
  --accent-deep: #8A6324;
  --surface: #1A0F08;
  --surface-warm: #2A1A0E;
  --on-surface: #FAF6EE;
  --on-surface-muted: rgba(250,246,238,.62);
  --material-overlay:
    radial-gradient(ellipse at 30% 25%, rgba(201,166,107,.18) 0%, transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.04) 0%, rgba(0,0,0,.45) 100%);
  --material-shadow: 0 28px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.04);
  --material-radius: 8px;
}

/* ─── 石 (stone) ─── 黒く重く、深い影 */
[data-craft-theme="aj"],
[data-craft-theme="to"],
[data-craft-theme="ws"],
[data-craft-theme="stone"] {
  --accent: #8C8579;
  --accent-deep: #4F4A40;
  --surface: #2A2723;
  --surface-warm: #3A3631;
  --on-surface: #E8E3DA;
  --on-surface-muted: rgba(232,227,218,.55);
  --material-overlay: radial-gradient(circle at 50% 30%, rgba(255,255,255,.05) 0%, transparent 60%);
  --material-shadow: 0 36px 80px rgba(0,0,0,.5);
  --material-radius: 2px;        /* 石は角ばる */
}

/* ─── 紙 (paper / washi) ─── 透過、柔らかい光 */
[data-craft-theme="wp"],
[data-craft-theme="ch"],
[data-craft-theme="wg"],
[data-craft-theme="paper"] {
  --accent: #B89968;
  --accent-deep: #735427;
  --surface: #FAF5E8;
  --surface-warm: #F2EAD3;
  --on-surface: #3A2B17;
  --on-surface-muted: rgba(58,43,23,.6);
  --material-overlay: linear-gradient(180deg, rgba(255,253,245,.6) 0%, transparent 100%);
  --material-shadow: 0 16px 40px rgba(160,130,80,.16);
  --material-pattern:
    repeating-linear-gradient(0deg, transparent 0, transparent 3px, rgba(160,130,80,.02) 3px, rgba(160,130,80,.02) 4px),
    repeating-linear-gradient(90deg, transparent 0, transparent 9px, rgba(160,130,80,.015) 9px, rgba(160,130,80,.015) 10px);
}

/* ─── 竹 / うちわ / 一刀彫 (bamboo) ─── 線・軽さ */
[data-craft-theme="mu"],
[data-craft-theme="si"],
[data-craft-theme="tk"],
[data-craft-theme="bs"],
[data-craft-theme="bamboo"] {
  --accent: #88965B;
  --accent-deep: #4E5733;
  --surface: #EFEBDE;
  --surface-warm: #DED9C5;
  --on-surface: #2D2E1F;
  --on-surface-muted: rgba(45,46,31,.6);
  --material-overlay: linear-gradient(135deg, rgba(136,150,91,.05), rgba(136,150,91,.02));
  --material-shadow: 0 14px 35px rgba(80,90,40,.12);
  --material-radius: 12px;
}

/* ─── 陶磁 (ceramic) ─── 土の粒子、釉薬の流れ */
[data-craft-theme="ri"],
[data-craft-theme="kk"],
[data-craft-theme="ok"],
[data-craft-theme="ceramic"] {
  --accent: #C8956D;
  --accent-deep: #7E5635;
  --surface: #F0E6D6;
  --surface-warm: #E0D2BB;
  --on-surface: #322516;
  --on-surface-muted: rgba(50,37,22,.6);
  --material-overlay:
    radial-gradient(ellipse at 70% 80%, rgba(180,120,70,.1) 0%, transparent 50%),
    radial-gradient(ellipse at 20% 30%, rgba(255,255,255,.06) 0%, transparent 60%);
  --material-shadow: 0 20px 50px rgba(130,90,50,.18);
  --material-radius: var(--r-2xl);
}

/* ─── ガラス (glass) ─── 屈折・透明感 */
[data-craft-theme="gl"],
[data-craft-theme="glass"] {
  --accent: #6FA8B0;
  --accent-deep: #2E5E66;
  --surface: rgba(245,250,252,.85);
  --surface-warm: rgba(220,235,240,.6);
  --on-surface: #1A2A30;
  --on-surface-muted: rgba(26,42,48,.55);
  --material-overlay:
    linear-gradient(135deg, rgba(255,255,255,.4) 0%, rgba(180,220,230,.15) 100%);
  --material-shadow: 0 18px 50px rgba(40,80,90,.18), inset 0 1px 0 rgba(255,255,255,.5);
  --material-radius: 12px;
}

/* ─── テーマを使う要素 ─── */
[data-craft-theme] .craft-themed {
  background: var(--surface);
  color: var(--on-surface);
  border-radius: var(--material-radius);
  box-shadow: var(--material-shadow);
  position: relative;
  overflow: hidden;
}
[data-craft-theme] .craft-themed::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--material-overlay);
  background-attachment: scroll;
  pointer-events: none;
}
[data-craft-theme] .craft-themed::after {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--material-pattern);
  pointer-events: none;
  opacity: .8;
}
[data-craft-theme] .craft-themed > * { position: relative; z-index: 1; }
[data-craft-theme] .craft-themed .craft-accent { color: var(--accent); }
[data-craft-theme] .craft-themed .craft-meta { color: var(--on-surface-muted); }