/* ============================================================
   Rishh Labs — shared theme layer
   Loaded AFTER each tool page's own <style> so it overrides.
   Does not touch /vitta/ — that product keeps its own identity.
   ============================================================ */

:root{
  /* remap the legacy neon tokens onto the Labs palette */
  --cyan:#F0B060;
  --purple:#D89A55;
  --pink:#E08A4A;
  --bg:#08080A;
  --card:rgba(244,244,246,.022);
  --border:rgba(244,244,246,.12);
  --muted:rgba(244,244,246,.56);

  --ink:#F4F4F6;
  --faint:rgba(244,244,246,.34);
  --glow:#F0B060;
  --sans:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --serif:'Fraunces',Georgia,serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

body{
  font-family:var(--sans)!important;
  background:var(--bg)!important;
  color:var(--ink)!important;
  line-height:1.55!important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
body::before{
  background:
    radial-gradient(ellipse at 50% -10%,rgba(240,176,96,.10),transparent 58%),
    radial-gradient(ellipse at 85% 105%,rgba(240,176,96,.05),transparent 52%)!important;
}
::selection{background:rgba(240,176,96,.25)}

/* ---------- nav ---------- */
nav{
  border-bottom:1px solid var(--border)!important;
  background:rgba(8,8,10,.65)!important;
  backdrop-filter:blur(16px)!important;
  padding:16px 24px!important;
}
nav .logo{
  font-family:var(--serif)!important;
  font-size:19px!important;
  font-weight:400!important;
  color:var(--ink)!important;
  text-shadow:none!important;
  background:none!important;
  -webkit-text-fill-color:var(--ink)!important;
  display:inline-flex!important;align-items:center!important;gap:9px!important;
}
nav .logo::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:var(--glow);box-shadow:0 0 12px rgba(240,176,96,.5);
}
nav .navlink{
  font-family:var(--mono)!important;font-size:11px!important;
  letter-spacing:.15em!important;text-transform:uppercase!important;
  color:var(--muted)!important;transition:color 300ms!important;
}
nav .navlink:hover{color:var(--glow)!important}

/* ---------- headings ---------- */
h1{
  font-family:var(--serif)!important;
  font-weight:400!important;
  letter-spacing:-.02em!important;
  line-height:1.1!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--ink)!important;
  color:var(--ink)!important;
  text-shadow:none!important;
}
h2,h3{font-family:var(--serif)!important;font-weight:400!important;color:var(--ink)!important}
.sub,.subtitle{color:var(--muted)!important;font-size:14.5px!important;line-height:1.6!important}

/* ---------- surfaces ---------- */
.input-card,.unit-card,.card,.result-card,.result-box,.container,
.chart-area,.privacy-banner,.timeline,.milestone,.slider-wrap,
.year-display,.fun-fact,.result,.clock,.context{
  background:var(--card)!important;
  border-color:var(--border)!important;
  border-radius:16px!important;
}
.unit-card:hover,.card:hover{
  border-color:rgba(240,176,96,.36)!important;
  box-shadow:none!important;
  transform:translateY(-2px)!important;
}

/* ---------- numeric / label typography (was Orbitron) ---------- */
.input-val,.unit-count,.val-amount,.year-num,.tl-amount,.tl-year,
.total-val,.legend-amount,.time-text,.years-text,.result-box{
  font-family:var(--sans)!important;
  font-weight:600!important;
  color:var(--ink)!important;
  text-shadow:none!important;
}
.unit-name,.unit-price,.val-label,.limits,.slider-limits,.total-label,
.legend,.time-sub,.years-sub,.input-label,.tl-year{
  font-family:var(--mono)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--faint)!important;
}
.input-val,.val-amount,.year-num,.total-val{color:var(--glow)!important}

/* ---------- range inputs ---------- */
input[type=range]::-webkit-slider-track{background:rgba(244,244,246,.12)!important}
input[type=range]::-webkit-slider-thumb{
  background:var(--glow)!important;
  box-shadow:0 0 14px rgba(240,176,96,.5)!important;
}
input[type=range]::-moz-range-track{background:rgba(244,244,246,.12)!important}
input[type=range]::-moz-range-thumb{background:var(--glow)!important;border:none!important}

/* ---------- text inputs ---------- */
input[type=text],input[type=number],textarea,select{
  background:rgba(244,244,246,.06)!important;
  border:1px solid rgba(244,244,246,.12)!important;
  border-radius:10px!important;
  color:var(--ink)!important;
  font-family:var(--sans)!important;
}
input:focus,textarea:focus,select:focus{
  outline:none!important;border-color:rgba(240,176,96,.5)!important;
}

/* ---------- buttons ---------- */
.btn,.share-btn,button{
  font-family:var(--sans)!important;
  font-weight:600!important;
  border-radius:999px!important;
  background:var(--ink)!important;
  color:#0a0a0c!important;
  border:none!important;
  text-shadow:none!important;
  transition:all 300ms!important;
}
.btn:hover,.share-btn:hover,button:hover{
  background:#fff!important;transform:translateY(-1px)!important;box-shadow:none!important;
}

/* ---------- progress / fills ---------- */
.tl-fill,.tl-bar,.total-bar,.legend-dot{
  background:var(--glow)!important;
}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--border)!important;
  color:var(--faint)!important;
  font-size:13px!important;
  font-family:var(--sans)!important;
  padding:34px 24px!important;
}
footer a{color:var(--muted)!important;transition:color 300ms!important}
footer a:hover{color:var(--glow)!important}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}