/* Kumiko Workshop — tool-light.css
   Brings customizer.html + maker.html onto the warm washi-LIGHT gallery aesthetic
   without touching their working 3D/editor internals. Loaded AFTER theme.css (+ gallery.css),
   it re-points the theme tokens to light values and keeps the 3D stage a deliberate dark
   viewport so the white PLA jig reads against it. */

:root{
  /* warm paper surfaces (were dark in theme.css) */
  --bg:#F1EBDF; --bg-1:#F1EBDF; --bg-2:#EAE1D0; --bg-3:#E4DAC6;
  --panel:#F8F7F3; --panel-2:#EFE7DA;

  /* warm ink */
  --fg:#241D14; --fg-2:#574B3B; --fg-3:#6E6152; --faint:#B4A88F;
  --muted:#6E6152; --fg-dim:#574B3B;

  /* natural wood accents (no neon amber) */
  --amber:#8A5626; --amber-bright:#A06D34; --amber-soft:#8A5626; --amber-deep:#4E3418;
  --wood:#8A5626; --wood-ink:#6E441E;
  --paper:#F1EBDF; --paper-2:#EAE1D0; --ink:#241D14; --ink-2:#574B3B;

  --line:rgba(58,42,24,.14); --line-2:rgba(58,42,24,.26); --hair:rgba(58,42,24,.14);
}

body{ background:var(--bg); color:var(--fg); }

/* nav: light bar + prominent solid Shop button (matches home/shop) */
.nav.scrolled{ background:rgba(244,238,227,.82); border-bottom:1px solid var(--line);
  box-shadow:0 12px 34px -26px rgba(40,28,14,.5); backdrop-filter:blur(14px) saturate(1.05); }
.brand-jp{ color:var(--fg); }
.brand-en, .nav-links a{ color:var(--fg-2); }
.nav-links a:hover{ color:var(--amber); }
.nav-shop{ border:1px solid var(--amber); background:var(--amber); color:#F6EFE2!important; padding:9px 22px; }
.nav-shop:hover{ background:var(--amber-deep); border-color:var(--amber-deep); color:#fff!important; }
@media (max-width:620px){
  .nav-links{ background:rgba(248,247,243,.98); border-left:1px solid var(--line); }
}

/* footer */
.foot{ background:var(--bg-2); border-top:1px solid var(--line); }
.foot-brand{ color:var(--fg-2); }
.foot-meta{ color:var(--muted); }

/* headings / accents on light */
em, .em{ color:var(--amber); }
::selection{ background:rgba(138,86,38,.20); color:var(--fg); }

/* ---- the 3D stage stays a dark "viewport" so the white PLA jig reads ---- */
.stage{
  background:radial-gradient(62% 56% at 50% 46%, #241a10 0%, #17110b 46%, #100b06 100%)!important;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  box-shadow:inset 0 0 60px rgba(0,0,0,.35), 0 30px 60px -40px rgba(60,42,22,.5);
}
/* overlay text on the dark stage → light-scoped tokens */
.stage, .stage-cap, .stage-tag, .hud{
  --fg:#F2EAD9; --fg-2:#CFC0A5; --fg-3:#A08D6E; --muted:#A08D6E;
  --amber:#E3B878; --amber-soft:#E3B878;
}

/* Customizer controls: one warm-paper instrument panel beside the deliberate
   dark model viewport. Scoped so Pattern Studio keeps its own editing surface. */
.customizer-page .panel{
  background:rgba(248,247,243,.94);
  -webkit-backdrop-filter:blur(18px) saturate(.9);
  backdrop-filter:blur(18px) saturate(.9);
  border-color:rgba(58,42,24,.20);
  box-shadow:0 28px 70px -44px rgba(60,42,22,.58), inset 0 1px rgba(255,255,255,.72);
  scrollbar-color:var(--wood) var(--paper-2);
}
.customizer-page .panel::-webkit-scrollbar{ width:8px; }
.customizer-page .panel::-webkit-scrollbar-track{ background:var(--paper-2); }
.customizer-page .panel::-webkit-scrollbar-thumb{
  background:var(--wood); border:2px solid var(--paper-2); border-radius:999px;
}
.customizer-page .panel-h{ border-bottom-color:var(--line-2); }
.customizer-page .grp + .grp{ border-top-color:var(--line); }
.customizer-page .grp-label{ color:var(--muted); }

.customizer-page .ctrl-val{
  background:#F1EBDF; border-color:rgba(58,42,24,.22); border-radius:2px;
  box-shadow:inset 0 1px 2px rgba(58,42,24,.035);
}
.customizer-page .ctrl-val:focus-within{
  border-color:var(--wood); outline:2px solid rgba(138,86,38,.18); outline-offset:1px;
}
.customizer-page .ctrl-val input{ color:var(--ink); }
.customizer-page .ctrl-val i{ color:var(--muted); }

.customizer-page .rng{
  --fill:50%; --range-track:#D7CBB7;
  accent-color:var(--wood); height:28px;
}
.customizer-page .rng::-webkit-slider-runnable-track{
  height:3px; border-radius:0;
  background:linear-gradient(to right,var(--wood) 0 var(--fill),var(--range-track) var(--fill) 100%);
}
.customizer-page .rng::-moz-range-track{
  height:3px; border-radius:0; background:var(--range-track);
}
.customizer-page .rng::-moz-range-progress{ height:3px; background:var(--wood); }
.customizer-page .rng::-webkit-slider-thumb{
  width:18px; height:18px; margin-top:-8px;
  background:var(--wood); border:3px solid #F8F7F3;
  box-shadow:0 0 0 1px var(--wood),0 4px 10px rgba(58,42,24,.22);
}
.customizer-page .rng::-moz-range-thumb{
  width:13px; height:13px; background:var(--wood); border:3px solid #F8F7F3;
  box-shadow:0 0 0 1px var(--wood),0 4px 10px rgba(58,42,24,.22);
}
.customizer-page .rng:hover::-webkit-slider-thumb{ background:var(--wood-deep); transform:scale(1.08); }
.customizer-page .rng:disabled{ opacity:.38; cursor:not-allowed; }

.customizer-page .chip{
  background:#F1EBDF; color:var(--ink-2); border-color:rgba(58,42,24,.20);
  border-radius:2px; font-weight:400;
}
.customizer-page .chip:hover{
  background:#EAE1D0; border-color:var(--wood); color:var(--ink);
}
.customizer-page .chip.is-on{
  background:var(--ink); border-color:var(--ink); color:#F3ECDE;
  box-shadow:none; font-weight:500;
}
.customizer-page .chip.is-on::before{ color:#D6A86A; }

.customizer-page .seg{
  background:#EAE1D0; border-color:rgba(58,42,24,.18); border-radius:2px; padding:3px;
}
.customizer-page .seg-btn{ border-radius:1px; color:var(--ink-2); }
.customizer-page .seg-btn.is-on{ background:var(--wood); color:#F6EFE2; }
.customizer-page .seg-hint strong{ color:var(--wood-ink); }

.customizer-page .track{
  background:#E4DAC6; border-color:rgba(58,42,24,.22);
}
.customizer-page .track::after{ background:var(--ink-2); }
.customizer-page .switch input:checked + .track{
  background:var(--wood); border-color:var(--wood);
}
.customizer-page .switch input:checked + .track::after{ background:#F8F7F3; }

.customizer-page .panel .actions .btn{
  background:#F1EBDF; border-color:rgba(58,42,24,.22); color:var(--ink-2);
}
.customizer-page .panel .actions .btn:hover{
  background:#EAE1D0; border-color:var(--wood); color:var(--ink);
}
.customizer-page .panel .actions #spin.is-on{
  background:var(--ink); border-color:var(--ink); color:#F3ECDE;
}
.customizer-page .order-note{
  background:#EFE7DA; border-color:rgba(58,42,24,.20); border-radius:2px;
  box-shadow:inset 3px 0 var(--wood);
}
.customizer-page .est-item{
  background:#F8F7F3; border-color:rgba(58,42,24,.16); border-radius:2px;
}
.customizer-page .stl-download{
  background:rgba(138,86,38,.065); border-color:rgba(138,86,38,.28); border-radius:2px;
}
.customizer-page .stl-cta{
  background:transparent; color:var(--wood-ink); border-color:var(--wood);
}
.customizer-page .stl-cta:hover{ background:var(--wood); color:#F6EFE2; }

@media (max-width:900px){
  .customizer-page .panel{ background:#F8F7F3; }
  .customizer-page .rng{ height:44px; }
  .customizer-page .orderbar{
    --fg:#F2EAD9; --fg-2:#CFC0A5; --fg-3:#A08D6E;
    --amber:#D6A86A; --amber-soft:#D6A86A; --amber-bright:#E7BD82;
    border-top-color:rgba(214,168,106,.22);
  }
}

/* Pattern Studio: skip the full-screen dark "light the lattice" intro so the page
   opens straight into the light editor (matches the home). Keep the nav clear of it. */
#lfIntro{ display:none!important; }
#studio{ padding-top:clamp(96px,13vh,132px); }

/* solid buttons: legible light text on the wood fill */
.btn--amber, .pill.solid{ background:var(--amber); border-color:var(--amber); color:#F6EFE2!important; }
.btn--amber:hover, .pill.solid:hover{ background:var(--amber-deep); border-color:var(--amber-deep); color:#fff!important; }
.btn{ color:var(--amber); border-color:var(--line-2); }
.btn:hover{ border-color:var(--amber); background:rgba(138,86,38,.06); }