/* =========================================================
   TWEAKS PANEL + ACCENT / PAPER VARIATIONS
   ========================================================= */

/* ---------- Theme palettes ---------- */
body[data-theme="calculator"]{
  --paper:        #F2EEE8;
  --paper-2:      #EBE6DE;
  --paper-3:      #E2DCD2;
  --cream:        #FFFFFF;

  --ink:          #1A1613;
  --ink-2:        #2A2420;
  --ink-3:        #6E665E;
  --ink-4:        #8A8079;
  --rule:         #DAD3C8;
  --rule-soft:    #E6E0D6;

  --red:          #C2462E;
  --red-2:        #A93A23;
  --red-3:        #8C2F1B;

  --gold:         #E6A92F;

  --night:        #1A1613;
  --night-2:      #252019;
  --night-text:   #D8CFC4;
  --night-mute:   #8A8079;
}

/* ---------- Accent variants ---------- */
body[data-accent="ink"]{
  --red: #15110d;
  --red-2:#000;
  --red-3:#000;
}
body[data-accent="gold"]{
  --red: #F6C415;
  --red-2:#DCAE0C;
  --red-3:#B68F06;
}
body[data-accent="forest"]{
  --red: #2e5a3f;
  --red-2:#22442f;
  --red-3:#162d1f;
}

/* ---------- Paper variants ---------- */
body[data-paper="cool"]{
  --paper:   #EFEFED;
  --paper-2: #E7E7E4;
  --paper-3: #DCDCD8;
  --cream:   #FFFFFF;
  --rule:    #D4D4CF;
  --rule-soft:#E2E2DE;
}
body[data-paper="bright"]{
  --paper:   #FFFFFF;
  --paper-2: #F6F5F2;
  --paper-3: #EFEEEA;
  --cream:   #FFFFFF;
  --rule:    #E3E1DB;
}

/* ---------- Tweaks panel ---------- */
#tweaks-panel{
  position:fixed;
  right:18px; bottom:18px;
  z-index:100;
  width:280px;
  background:var(--cream);
  color:var(--ink);
  border:1px solid var(--ink);
  border-radius:12px;
  box-shadow: 0 18px 50px -18px rgba(20,15,8,.45);
  font-family:var(--f-sans);
  overflow:hidden;
}
.tk__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid var(--rule);
  background:var(--ink);
  color:var(--cream);
}
.tk__title{
  font-family:var(--f-mono);
  font-size:11px;
  letter-spacing:.18em;
  text-transform:uppercase;
  font-weight:600;
}
.tk__close{
  width:22px; height:22px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:var(--cream);
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  line-height:1;
}
.tk__close:hover{ background:rgba(255,255,255,.2); }
.tk__body{ padding:14px; display:flex; flex-direction:column; gap:14px; }
.tk__group{ display:flex; flex-direction:column; gap:8px; }
.tk__label{
  font-family:var(--f-mono);
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.tk__seg{
  display:flex;
  border:1px solid var(--rule);
  border-radius:6px;
  overflow:hidden;
  background:var(--paper);
}
.tk__seg button{
  flex:1;
  padding:8px 8px;
  font-size:12px;
  font-weight:500;
  border-right:1px solid var(--rule);
  color:var(--ink-2);
  transition:background .15s, color .15s;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
}
.tk__seg button:last-child{ border-right:0; }
.tk__seg button[aria-pressed="true"]{ background:var(--ink); color:var(--cream); }
.tk__seg button[style*="--swatch"]::before{
  content:"";
  width:10px; height:10px;
  border-radius:50%;
  background:var(--swatch, var(--ink));
  border:1px solid rgba(0,0,0,.15);
}
.tk__reset{
  padding:8px;
  font-family:var(--f-mono);
  font-size:10.5px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-3);
  border:1px solid var(--rule);
  border-radius:6px;
}
.tk__reset:hover{ color:var(--ink); border-color:var(--ink); }