/* ============================================================
   KARAKURI STUDIO — THEME SYSTEM
   Dark = 提灯の夜 (lantern night)
   Light = 浮世絵の昼 (ukiyo-e daylight)
   ============================================================ */

/* ── Theme toggle button ── */
.theme-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--gin);
  cursor: pointer;
  border-radius: 2px;
  flex-shrink: 0;
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
}
.theme-btn:hover {
  border-color: var(--border2);
  color: var(--kin);
}
.theme-btn svg {
  width: 15px;
  height: 15px;
  pointer-events: none;
}

/* ============================================================
   DARK THEME (default — 夜の提灯)
   ============================================================ */
[data-theme="dark"] {
  --sumi:    #0a0906;
  --sumi2:   #141109;
  --sumi3:   #1c1810;
  --washi:   #f5efe0;
  --washi2:  #e0d8c4;
  --washi3:  #c8bfa8;
  --kin:     #c9a84c;
  --kin2:    #e8c56a;
  --kin3:    #f5d880;
  --beni:    #c0392b;
  --beni2:   #e04030;
  --gin:     #8a9490;
  --border:  rgba(201,168,76,0.14);
  --border2: rgba(201,168,76,0.28);

  --nav-bg:     linear-gradient(180deg, rgba(10,9,6,0.96) 0%, rgba(10,9,6,0) 100%);
  --nav-border: rgba(201,168,76,0.07);
  --text-d1:    rgba(245,239,224,0.58);
  --text-d2:    rgba(245,239,224,0.52);
  --text-d3:    rgba(245,239,224,0.42);
  --text-d4:    rgba(245,239,224,0.30);
  --text-d5:    rgba(245,239,224,0.18);
  --noise-op:   1;
}

/* ============================================================
   LIGHT THEME — 浮世絵の昼
   Concept: Edo woodblock print in bright daylight.
   Stark white washi paper · deep sumi ink · vivid beni red · amber gold
   ============================================================ */
[data-theme="light"] {
  --sumi:    #faf6ed;   /* washi white — bright, warm paper */
  --sumi2:   #f0e8d4;   /* aged parchment for cards */
  --sumi3:   #e6dbc4;   /* deeper parchment for hover */
  --washi:   #0a0906;   /* deep sumi ink — full contrast */
  --washi2:  #1c1610;
  --washi3:  #302818;
  --kin:     #a06800;   /* rich amber — visible on bright bg */
  --kin2:    #c48000;
  --kin3:    #e89c00;
  --beni:    #c0392b;   /* same vivid red — always punches */
  --beni2:   #e04030;
  --gin:     #4a5248;   /* dark sage — replaces silver */
  --border:  rgba(160,104,0,0.22);
  --border2: rgba(160,104,0,0.42);

  --nav-bg:     linear-gradient(180deg, rgba(250,246,237,0.98) 0%, rgba(250,246,237,0) 100%);
  --nav-border: rgba(160,104,0,0.15);
  --text-d1:    rgba(10,9,6,0.65);
  --text-d2:    rgba(10,9,6,0.55);
  --text-d3:    rgba(10,9,6,0.42);
  --text-d4:    rgba(10,9,6,0.28);
  --text-d5:    rgba(10,9,6,0.16);
  --noise-op:   0.25;
}

/* ============================================================
   SHARED — Apply nav variable (overrides inline rgba)
   ============================================================ */
nav {
  background: var(--nav-bg) !important;
  border-bottom-color: var(--nav-border) !important;
}

/* Noise grain controlled by variable */
body::before {
  opacity: var(--noise-op);
}

/* ============================================================
   LIGHT MODE — Overrides for hardcoded rgba(245,239,224,…) values
   and structural adjustments for the ukiyo-e aesthetic
   ============================================================ */

/* ── Body & base ── */
[data-theme="light"] body {
  color: var(--washi);
}

/* ── Hero ── */
[data-theme="light"] .hero-desc {
  color: var(--text-d1);
}
[data-theme="light"] .hero-desc strong {
  color: var(--washi);
}
/* Hero gear: give it a dark "night sky" circle — the mechanism lives in darkness */
[data-theme="light"] .hero-right {
  background: radial-gradient(ellipse 80% 80% at 50% 50%,
    #1c1810 0%, #0f0d08 60%, transparent 100%);
  border-radius: 50%;
}

/* ── Section descriptions (inline-styled <p>) ── */
[data-theme="light"] .section-header > p,
[data-theme="light"] .section-header p[style] {
  color: var(--text-d2) !important;
}

/* ── Marquee — wood block print stripe ── */
[data-theme="light"] .marquee-wrap {
  background: var(--beni);
  border-top-color: var(--beni2);
  border-bottom-color: var(--beni2);
}
[data-theme="light"] .marquee-item {
  color: #faf6ed;
  opacity: 0.9;
}
[data-theme="light"] .marquee-sep {
  color: rgba(250,246,237,0.5);
}

/* ── App cards ── */
[data-theme="light"] .app-card {
  background: var(--sumi2);
}
[data-theme="light"] .app-card:hover {
  background: var(--sumi3);
}
[data-theme="light"] .app-card::before {
  border-top-color: rgba(160,104,0,0.12);
}
[data-theme="light"] .app-card:hover::before {
  border-top-color: rgba(160,104,0,0.30);
}
[data-theme="light"] .app-card::after {
  border-color: transparent;
}
[data-theme="light"] .app-card:hover::after {
  border-color: rgba(160,104,0,0.25);
}
[data-theme="light"] .app-desc {
  color: var(--text-d3);
}
[data-theme="light"] .app-name-ja {
  color: var(--washi2);
}
[data-theme="light"] .app-name-en {
  color: var(--washi);
}
[data-theme="light"] .app-category-badge {
  color: var(--kin);
  border-color: rgba(160,104,0,0.35);
}
[data-theme="light"] .plat-badge.on,
[data-theme="light"] .platform-badge.on {
  color: var(--washi2);
  border-color: var(--border2);
  background: rgba(160,104,0,0.07);
}
[data-theme="light"] .plat-badge.off,
[data-theme="light"] .platform-badge.off {
  color: var(--text-d5);
  border-color: var(--border);
  background: transparent;
}
[data-theme="light"] .app-store-hint {
  color: var(--kin);
}

/* ── Category section ── */
[data-theme="light"] .cat-desc {
  color: var(--text-d4);
}
[data-theme="light"] .cat-label-ja {
  color: rgba(160,104,0,0.45);
}
[data-theme="light"] .cat-divider {
  background: linear-gradient(to right, rgba(160,104,0,0.4), transparent);
}

/* ── Apps grid border ── */
[data-theme="light"] .apps-grid {
  background: rgba(160,104,0,0.15);
  border-color: rgba(160,104,0,0.15);
}

/* ── Philosophy — woodblock grid ── */
[data-theme="light"] .phil-grid {
  background: rgba(160,104,0,0.18);
  border-color: rgba(160,104,0,0.18);
}
[data-theme="light"] .phil-item {
  background: var(--sumi2);
}
[data-theme="light"] .phil-item:hover {
  background: var(--sumi3);
}
[data-theme="light"] .phil-num {
  color: rgba(10,9,6,0.06);
}
[data-theme="light"] .phil-body {
  color: var(--text-d2);
}
[data-theme="light"] .phil-body-ja {
  color: var(--text-d4);
}
[data-theme="light"] #philosophy {
  background: var(--sumi);
}

/* ── Story ── */
[data-theme="light"] #story {
  background: var(--sumi2);
}
[data-theme="light"] .story-quote {
  border-left-color: var(--beni);
  color: var(--washi);
}
[data-theme="light"] .story-body {
  color: var(--text-d2);
}
[data-theme="light"] .story-body strong {
  color: var(--washi);
  font-weight: 400;
}
[data-theme="light"] .gennai-card {
  background: var(--sumi);
  border-color: var(--border2);
}
[data-theme="light"] .gennai-name-ja {
  color: var(--washi);
}
[data-theme="light"] .gennai-name-en {
  color: var(--kin2);
}
[data-theme="light"] .gennai-fact {
  color: var(--text-d2);
}
[data-theme="light"] .fact-label {
  color: var(--kin);
}

/* ── News ── */
[data-theme="light"] .news-list {
  background: var(--sumi2);
  border-color: var(--border);
}
[data-theme="light"] .news-item {
  border-bottom-color: var(--border);
}
[data-theme="light"] .news-item:hover {
  background: rgba(160,104,0,0.06);
}
[data-theme="light"] .news-title {
  color: var(--washi);
}
[data-theme="light"] .news-title-ja {
  color: var(--text-d4);
}
[data-theme="light"] .news-body {
  color: var(--text-d3);
}
[data-theme="light"] .news-arrow {
  color: var(--kin);
}
[data-theme="light"] .news-tag.t-new {
  color: var(--beni);
  border-color: rgba(192,57,43,0.4);
}
[data-theme="light"] .news-tag.t-web {
  color: #2a8a60;
  border-color: rgba(42,138,96,0.35);
}
[data-theme="light"] .news-tag.t-launch {
  color: var(--kin);
  border-color: var(--border2);
  background: rgba(160,104,0,0.08);
}

/* ── Brand ── */
[data-theme="light"] .brand-card {
  background: var(--sumi2);
  border-color: var(--border);
}
/* Palette swatches — light bg border */
[data-theme="light"] .swatch-color {
  border-color: rgba(10,9,6,0.12) !important;
}

/* ── Ornament ── */
[data-theme="light"] .ornament {
  opacity: 0.28;
}
[data-theme="light"] .orn-line {
  background: var(--kin);
}

/* ── Buttons ── */
[data-theme="light"] .btn-primary {
  background: var(--washi);
  color: var(--sumi);
}
[data-theme="light"] .btn-primary:hover {
  background: var(--washi2);
}
[data-theme="light"] .btn-secondary {
  border-color: var(--border2);
  color: var(--kin);
}
[data-theme="light"] .btn-secondary:hover {
  background: rgba(160,104,0,0.08);
  border-color: var(--kin2);
  color: var(--kin2);
}

/* ── Footer ── */
[data-theme="light"] footer {
  background: var(--sumi2);
  border-top-color: var(--border2);
}
[data-theme="light"] .footer-haiku {
  color: var(--text-d4);
}

/* ── app.html specific ── */
[data-theme="light"] .app-hero {
  border-bottom-color: var(--border);
}
[data-theme="light"] .app-hero-desc {
  color: var(--text-d1);
}
[data-theme="light"] .app-hero-icon {
  border-color: rgba(160,104,0,0.25);
}
[data-theme="light"] .app-hero-released {
  color: var(--text-d4);
}
[data-theme="light"] .app-info {
  border-bottom-color: var(--border);
}
[data-theme="light"] .info-body {
  color: var(--text-d2);
}
[data-theme="light"] .info-section-label {
  color: var(--kin);
}
[data-theme="light"] .info-meta-card {
  background: var(--sumi2);
  border-color: var(--border);
}
[data-theme="light"] .meta-row {
  border-bottom-color: var(--border);
}
[data-theme="light"] .meta-key {
  color: var(--gin);
}
[data-theme="light"] .meta-val {
  color: var(--washi2);
}
[data-theme="light"] .related-grid {
  background: rgba(160,104,0,0.15);
  border-color: rgba(160,104,0,0.15);
}
[data-theme="light"] .related-card {
  background: var(--sumi2);
}
[data-theme="light"] .related-card:hover {
  background: var(--sumi3);
}
[data-theme="light"] .related-name-ja {
  color: var(--washi2);
}
[data-theme="light"] .related-name-en {
  color: var(--washi);
}
[data-theme="light"] .related-desc {
  color: var(--text-d3);
}
[data-theme="light"] .related-arrow {
  color: var(--kin);
}
[data-theme="light"] #playSection {
  border-bottom-color: var(--border);
}
[data-theme="light"] .play-header {
  background: var(--sumi2);
  border-bottom-color: var(--border);
}
[data-theme="light"] .play-label {
  color: var(--kin);
}
[data-theme="light"] .play-frame-hint {
  background: var(--sumi2);
  color: var(--text-d3);
}
[data-theme="light"] .nav-back {
  border-color: var(--border);
  color: var(--gin);
}
[data-theme="light"] .nav-back:hover {
  color: var(--kin);
  border-color: var(--border2);
}
[data-theme="light"] footer .footer-inner .footer-brand {
  color: var(--kin);
}
[data-theme="light"] footer .footer-inner .footer-copy {
  color: var(--gin);
}

/* ── Smooth transitions ── */
body,
nav,
.marquee-wrap,
.app-card,
.phil-item,
.phil-grid,
.news-list,
.news-item,
.brand-card,
.gennai-card,
.related-card,
.related-grid,
.info-meta-card,
.play-header,
#playSection,
.apps-grid,
footer {
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease;
}