/* ==========================================================================
   QueryForge design system  (ds/qf.css)
   One source of truth for type, colour, radius and the shared components.
   Used by: homepage, guide pages, playground, design-system.html.
   Components are prefixed .qd- so they never collide with page-specific CSS.
   Theme comes from <html data-theme="dark|light"> (set by qf-nav.js); dark is the default.
   ========================================================================== */

/* ---- Barlow, self-hosted (latin). Preload the weights a page needs above the fold. ---- */
@font-face{font-family:"Barlow";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/barlow-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/barlow-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/barlow-600.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Barlow";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/barlow-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Tokens: shape and type (theme independent) ---- */
:root{
  --qd-font:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --qd-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --qd-r-sm:6px;   /* chips, small buttons, tabs */
  --qd-r:8px;      /* buttons, inputs */
  --qd-r-lg:12px;  /* cards, panels */
  --qd-r-xl:16px;  /* modals, hero panels */
  --qd-h-btn:44px; --qd-h-btn-sm:36px;
}

/* ---- Tokens: colour. Names match what the homepage already used (--color-*) so nothing there breaks. ---- */
:root[data-theme="dark"], :root:not([data-theme]){
  --color-bg:#0e1216; --color-surface:#19222c; --color-text:#e7ebef; --color-accent:#8fb8de;
  --color-divider:rgba(231,235,239,.12);
  --qd-alt:#141c25; --qd-chip:rgba(143,184,222,.10); --qd-on-accent:#0b1117;
  --qd-ok:#6fd3a0; --qd-okbg:rgba(111,211,160,.09); --qd-warn:#f0b86e; --qd-bad:#ff8f8f; --qd-badbg:rgba(255,143,143,.08);
  --qd-key:#8fb8de; --qd-str:#9bd3a6; --qd-num:#e6b873; --qd-kw:#c3a6f0;
  --qd-g1:#9fcaf0; --qd-g2:#6f9ac2;
}
:root[data-theme="light"]{
  --color-bg:#f7f9fb; --color-surface:#ffffff; --color-text:#1d1f20; --color-accent:#416180;
  --color-divider:rgba(29,31,32,.14);
  --qd-alt:#e9eff5; --qd-chip:rgba(65,97,128,.10); --qd-on-accent:#ffffff;
  --qd-ok:#1c8a58; --qd-okbg:rgba(28,138,88,.08); --qd-warn:#b4690c; --qd-bad:#c0392b; --qd-badbg:rgba(192,57,43,.06);
  --qd-key:#2c5f8f; --qd-str:#2f7d4f; --qd-num:#a65b12; --qd-kw:#6a4bb0;
  --qd-g1:#2f6fa8; --qd-g2:#4a7aa6;
}

/* ---- Typography ---- */
.qd-eyebrow{display:inline-block;font:500 13px/1.2 var(--qd-font);letter-spacing:.02em;color:var(--color-accent)}
.qd-h1,.qd-h2,.qd-h3{font-family:var(--qd-font);font-weight:600;letter-spacing:-.02em;margin:0;color:var(--color-text)}
.qd-h1{font-size:clamp(34px,5vw,64px);line-height:1.04;letter-spacing:-.03em;text-wrap:balance}
.qd-h2{font-size:clamp(26px,3.2vw,40px);line-height:1.1;text-wrap:balance}
.qd-h3{font-size:19px;line-height:1.25;letter-spacing:-.01em}
.qd-lead{font:400 18px/1.6 var(--qd-font);max-width:62ch;text-wrap:pretty;color:color-mix(in srgb,var(--color-text) 68%,transparent)}
.qd-muted{color:color-mix(in srgb,var(--color-text) 68%,transparent)}
.qd-link{color:var(--color-accent);text-decoration:underline;text-underline-offset:3px}
.qd-mono{font-family:var(--qd-mono)}

/* ---- Buttons ---- */
.qd-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--qd-h-btn);padding:0 20px;
  font:500 15px var(--qd-font);letter-spacing:0;border-radius:var(--qd-r);border:1px solid var(--color-divider);
  color:var(--color-text);background:transparent;text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,filter .15s,transform .12s}
.qd-btn:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.qd-btn:active{transform:translateY(1px)}
.qd-btn:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.qd-btn[disabled],.qd-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
.qd-btn--primary{background:var(--color-accent);border-color:var(--color-accent);color:var(--qd-on-accent)}
.qd-btn--primary:hover{background:var(--color-accent);filter:brightness(1.08)}
.qd-btn--ghost{border-color:transparent}
.qd-btn--danger{color:var(--qd-bad);border-color:color-mix(in srgb,var(--qd-bad) 45%,transparent)}
.qd-btn--danger:hover{background:var(--qd-badbg)}
.qd-btn--sm{height:var(--qd-h-btn-sm);padding:0 14px;font-size:14px}
@media (prefers-reduced-motion:reduce){.qd-btn{transition:none}.qd-btn:active{transform:none}}

/* ---- Chips, badges, cards ---- */
.qd-chip{display:inline-flex;align-items:center;gap:6px;font:500 13px var(--qd-font);padding:4px 10px;border-radius:var(--qd-r-sm);
  background:var(--qd-chip);border:1px solid color-mix(in srgb,var(--color-accent) 30%,transparent);color:var(--color-text)}
.qd-badge{display:inline-flex;align-items:center;font:600 11.5px var(--qd-font);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:999px;border:1px solid var(--color-divider);color:color-mix(in srgb,var(--color-text) 72%,transparent)}
.qd-badge--accent{color:var(--color-accent);border-color:color-mix(in srgb,var(--color-accent) 45%,transparent);background:var(--qd-chip)}
.qd-card{background:var(--color-surface);border:1px solid var(--color-divider);border-radius:var(--qd-r-lg);padding:24px}

/* ---- Form controls ---- */
.qd-input{font:400 15px var(--qd-font);color:var(--color-text);background:color-mix(in srgb,var(--color-text) 3%,transparent);
  border:1px solid var(--color-divider);border-radius:var(--qd-r);padding:0 12px;height:var(--qd-h-btn);box-sizing:border-box}
textarea.qd-input{height:auto;padding:10px 12px;line-height:1.5}
.qd-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px var(--qd-chip)}
.qd-input::placeholder{color:color-mix(in srgb,var(--color-text) 45%,transparent)}

/* ---- Tabs ---- */
.qd-tabs{display:flex;flex-wrap:wrap;gap:6px}
.qd-tab{font:500 14px var(--qd-font);padding:7px 12px;border-radius:var(--qd-r-sm);border:1px solid transparent;background:transparent;
  color:color-mix(in srgb,var(--color-text) 66%,transparent);cursor:pointer}
.qd-tab:hover{color:var(--color-text)}
.qd-tab[aria-selected="true"]{background:var(--qd-chip);border-color:color-mix(in srgb,var(--color-accent) 40%,transparent);color:var(--color-text)}

/* ---- Code ---- */
.qd-code{margin:0;font:400 13px/1.7 var(--qd-mono);padding:14px 16px;border-radius:10px;background:color-mix(in srgb,var(--color-text) 5%,transparent);
  border:1px solid var(--color-divider);overflow-x:auto;white-space:pre}
.qd-code .k{color:var(--qd-key)} .qd-code .s{color:var(--qd-str)} .qd-code .n{color:var(--qd-num)}
.qd-code .kw{color:var(--qd-kw);font-weight:600} .qd-code .c{color:color-mix(in srgb,var(--color-text) 52%,transparent)}

/* ==========================================================================
   Playground bridge.
   The playground's markup carries inline styles (Barlow Condensed, square corners). Rather than
   rewrite the whole template, these rules bring its buttons, inputs, panels and type onto the same
   tokens. !important is deliberate: it is what lets a shared stylesheet beat inline style="".
   ========================================================================== */
.qf-root{font-family:var(--qd-font)}
.qf-root button:not(.qf-hist):not(.qf-hist-x),.qf-root label.qf-btn{
  font-family:var(--qd-font)!important;font-weight:500!important;letter-spacing:0!important;border-radius:var(--qd-r)!important}
.qf-root button.qf-btn,.qf-root label.qf-btn{font-size:15px!important}
.qf-root select,.qf-root input:not([type=checkbox]):not([type=radio]):not([type=file]){
  font-family:var(--qd-font)!important;border-radius:var(--qd-r)!important}
.qf-root .qf-pad{border-radius:var(--qd-r-lg)!important;overflow:hidden}
.qf-root .qf-box{border-radius:var(--qd-r-xl)!important}
.qf-root .qf-code,.qf-root .qf-hist,.qf-root .qf-pad textarea,.qf-root .qf-gut span{font-family:var(--qd-mono)!important}
.qf-root [style*="border: 1px solid"][style*="padding"]{border-radius:var(--qd-r-lg)}
.qf-root h1,.qf-root h2,.qf-root h3,.qf-root h4{font-family:var(--qd-font)!important;font-weight:600!important;letter-spacing:-.01em!important;text-transform:none!important}
.qf-root [style*="Barlow Condensed"]{font-family:var(--qd-font)!important;letter-spacing:0!important;text-transform:none!important}