/* ============================================================
   tinker.codes — shared theme  ·  workbench / lab
   Drop-in: link this AFTER the app's own stylesheet.
     <link rel="stylesheet" href="/theme/tinker.css?v=1" />
   It owns tokens, chrome and generic controls; apps keep layout.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&family=Space+Grotesk:wght@500;600;700&display=swap');

:root{
  /* ground + ink */
  --ground:#0a0c0f;--ground-2:#0d1014;--panel:rgba(16,20,25,.66);--field:#0b0e12;--code:#0e1216;
  --ink:#e7ebee;--ink-2:#9aa4ad;--ink-3:#5d666e;--ink-4:#39414a;
  --rule:#1a1f25;--rule-hi:#28303a;
  /* signal */
  --accent:#2dd4bf;--accent-soft:rgba(45,212,191,.13);--accent-ink:#0a0c0f;
  --amber:#e8a33d;--blue:#6aa5f4;--violet:#a78bfa;--danger:#f2777a;
  --wip:var(--amber);--offline:var(--ink-3);
  /* type + metrics */
  --mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,Monaco,Consolas,monospace;
  --sans:'Space Grotesk',ui-sans-serif,system-ui,-apple-system,sans-serif;
  --r:4px;--r-lg:6px;--bar-h:46px;
  /* legacy aliases — every existing app token keeps working */
  --bg:var(--ground);--bg-soft:var(--ground-2);--fg:var(--ink);--muted:var(--ink-2);--dim:var(--ink-3);
  --border:var(--rule);--border-hover:var(--rule-hi);--border-hi:var(--rule-hi);
  --input:var(--field);--highlight:var(--accent-soft);
  color-scheme:dark;font-family:var(--mono);
}

/* ---------- ground: blueprint sheet ---------- */
body{background:var(--ground)!important;color:var(--ink);font-family:var(--mono);-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 45% at 12% -5%,rgba(45,212,191,.09),transparent 65%),
    radial-gradient(ellipse 55% 40% at 88% 6%,rgba(106,165,244,.06),transparent 65%),
    linear-gradient(180deg,var(--ground-2),var(--ground) 55%)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(to right,rgba(160,190,205,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(160,190,205,.045) 1px,transparent 1px),
    linear-gradient(to right,rgba(160,190,205,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(160,190,205,.05) 1px,transparent 1px);
  background-size:26px 26px,26px 26px,130px 130px,130px 130px;
  mask-image:radial-gradient(ellipse 95% 70% at 50% 8%,#000,transparent 80%)}
::selection{background:var(--accent-soft);color:var(--ink)}
*{scrollbar-width:thin;scrollbar-color:var(--rule-hi) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--rule-hi);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}
a{color:var(--accent);text-decoration:none}
a:hover{color:color-mix(in oklab,var(--accent) 70%,#fff)}

/* ---------- appbar (injected by theme/appbar.js) ---------- */
.tk-bar{position:sticky;top:0;z-index:60;display:flex;align-items:center;gap:.85rem;min-height:var(--bar-h);
  padding:0 clamp(.9rem,3vw,1.5rem);border-bottom:1px solid var(--rule);
  background:color-mix(in oklab,var(--ground) 82%,transparent);backdrop-filter:blur(10px);
  font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.tk-bar .tk-mark{display:flex;align-items:baseline;gap:.5rem;text-transform:none;letter-spacing:0}
.tk-bar .tk-mark svg{width:24px;height:18px;color:var(--accent);opacity:.9;flex:none}
.tk-bar .tk-wm{font-family:var(--sans);font-size:.95rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.tk-bar .tk-wm i{font-style:normal;font-weight:500;color:var(--ink-3)}
.tk-bar .tk-sep{width:1px;height:16px;background:var(--rule-hi)}
.tk-bar .tk-app{font-family:var(--sans);font-size:.85rem;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-2)}
.tk-bar .tk-right{margin-left:auto;display:flex;align-items:center;gap:1rem}
.tk-bar .tk-right a{color:var(--ink-3)}
.tk-bar .tk-right a:hover{color:var(--accent)}
.tk-dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent);margin-right:.4rem;vertical-align:middle}

/* ---------- headings: drop the old gradient + "> " prefix ---------- */
header h1,.brand h1{font-family:var(--sans);font-weight:600;letter-spacing:-.03em;color:var(--ink);
  background:none;-webkit-text-fill-color:currentColor;background-clip:border-box}
header h1::before,.brand h1::before{content:none!important}
h1,h2,h3{font-family:var(--sans);letter-spacing:-.02em}
.tagline{color:var(--ink-2);font-size:.85rem}
.home-link{color:inherit}
.home-link:hover{opacity:.8}

/* ---------- labels + micro type ---------- */
.row label,.pane-header,.group-title,.label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.row .meta,.pane-header .meta{font-size:.72rem;letter-spacing:0;text-transform:none;color:var(--ink-2)}

/* ---------- controls ---------- */
button,.btn{font-family:var(--mono);font-size:.78rem;letter-spacing:.02em;background:transparent;color:var(--ink-2);
  border:1px solid var(--rule-hi);border-radius:var(--r);padding:.45rem .85rem;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
button:hover,.btn:hover{color:var(--accent);border-color:color-mix(in oklab,var(--accent) 55%,var(--rule-hi));background:var(--accent-soft)}
button:focus-visible,.btn:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:1px solid var(--accent);outline-offset:1px}
button.primary,.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:500}
button.primary:hover,.btn.primary:hover{background:color-mix(in oklab,var(--accent) 82%,#fff);color:var(--accent-ink)}
button[disabled],.btn[disabled]{opacity:.4;cursor:not-allowed}
input[type='text'],input[type='search'],input[type='number'],textarea,select{font-family:var(--mono);font-size:15px;
  background:var(--field);color:var(--ink);border:1px solid var(--rule);border-radius:var(--r);padding:.62rem .8rem;
  transition:border-color .15s,box-shadow .15s;width:100%}
input:focus,textarea:focus,select:focus{outline:none;border-color:color-mix(in oklab,var(--accent) 45%,var(--rule-hi));box-shadow:0 0 0 3px var(--accent-soft)}
::placeholder{color:var(--ink-4)}

/* ---------- surfaces ---------- */
.pane,.panel,.card,.output,.tool-panel{background:var(--panel);border:1px solid var(--rule);border-radius:var(--r-lg)}
.output{font-family:var(--mono);background:var(--field);color:var(--ink);line-height:1.6}
.output mark{background:var(--accent-soft);color:var(--accent);border-radius:2px;padding:0 2px}
.pane-header{background:color-mix(in oklab,var(--ground-2) 88%,transparent);border-bottom:1px solid var(--rule)}
.tag,.chip{font-size:.62rem;letter-spacing:.06em;color:var(--ink-3);border:1px solid var(--rule);border-radius:2px;
  padding:.13rem .4rem;background:rgba(0,0,0,.25)}

/* ---------- tabs ---------- */
.tabs{border-bottom:1px solid var(--rule);gap:.15rem}
.tab{font-family:var(--mono);font-size:.8rem;color:var(--ink-3);border:none;background:transparent;border-radius:0;
  border-bottom:2px solid transparent;padding:.6rem .85rem}
.tab:hover{color:var(--ink);background:transparent}
.tab.active{color:var(--accent);border-bottom-color:var(--accent);background:transparent}

/* ---------- status ---------- */
.status-live,.ok{color:var(--accent)}
.status-wip,.warn{color:var(--amber)}
.status-offline{color:var(--offline)}
.err,.error,.danger{color:var(--danger)}

/* ---------- ruler rule: use as a section divider ---------- */
.tk-rule{height:5px;border-top:1px solid var(--rule);
  background-image:linear-gradient(to right,var(--rule-hi) 1px,transparent 1px);background-size:13px 5px}

/* ---------- footer ---------- */
footer{color:var(--ink-3);font-size:.72rem}
footer a{color:var(--ink-2)}
footer a:hover{color:var(--accent)}
.credits,.credits a{font-size:.68rem;color:var(--ink-3)}
.credits a:hover{color:var(--accent)}

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