/* HueWiz theme — dark adaptation of a warm-neutral, single-accent style.
   Loaded last on every page so it can retune the per-template variables.
   Rules: one violet action per surface; gradient only on one headline word;
   16px radius for cards, 8px for buttons/inputs/badges; type stays in Inter.
   Layout properties are deliberately left to the page templates. */

@font-face{font-family:'Inter';src:url('/assets/fonts/inter-latin-var.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-latin-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('/assets/fonts/jetbrains-mono-latin-500.woff2') format('woff2');font-weight:500 700;font-style:normal;font-display:swap}

:root{
  /* Dark surfaces — warm neutrals (canvas → card → raised) */
  --hz-canvas:#121211; --hz-card:#1A1918; --hz-raised:#22211F;
  --hz-line:#2E2D2A; --hz-line-soft:#252422; --hz-line-strong:#3D3B38;
  /* Text */
  --hz-ink:#F1F0EE; --hz-fog:#A8A6A1; --hz-faint:#8A8883;
  /* The one accent */
  --hz-iris:#6248FF; --hz-iris-hover:#7560FF; --hz-iris-text:#9D8CFF; --hz-lilac:#B8ADF5;
  --hz-iris-wash:rgba(98,72,255,.16);
  --hz-gradient:linear-gradient(100deg,#FF7448,#FF4848 42%,#8B76FF 85%);
  --hz-sans:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --hz-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --hz-shadow:0 8px 10px -4px rgba(0,0,0,.35),0 2px 10px 2px rgba(0,0,0,.22);

  /* Map onto the variables every template already uses */
  --bg:var(--hz-canvas); --panel:var(--hz-card); --panel-2:var(--hz-raised); --panel2:var(--hz-raised);
  --line:var(--hz-line); --line-soft:var(--hz-line-soft); --soft:var(--hz-line-soft);
  --ink:var(--hz-ink); --ink-dim:var(--hz-fog); --ink-faint:var(--hz-faint); --dim:var(--hz-fog); --faint:var(--hz-faint);
  --blue:var(--hz-iris); --radius:16px;
  --sans:var(--hz-sans); --mono:var(--hz-mono);
}

html{background:var(--hz-canvas)}
body{background:var(--hz-canvas)!important;color:var(--hz-ink);font-family:var(--hz-sans);
  font-feature-settings:"ss01" on,"cv11" on;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--hz-iris);color:#fff}
:focus-visible{outline:2px solid var(--hz-lilac);outline-offset:3px}

/* Typography: medium weight, tight tracking on display sizes */
h1,h2,h3,h4{font-family:var(--hz-sans);font-weight:500}
/* No heading color here: palette previews set text color on their container and headings must inherit it. */
h1{letter-spacing:-.03em;line-height:1.05}
h2{letter-spacing:-.02em}
h3{letter-spacing:-.01em}
p,li{font-family:var(--hz-sans)}
code,pre,kbd{font-family:var(--hz-mono)}
.hz-grad{background:var(--hz-gradient);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* Navigation: transparent bar on the canvas, ghost links, outline CTA */
.nav{position:static!important;background:transparent!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;padding-left:0!important;padding-right:0!important}
.brand{font-family:var(--hz-sans);font-weight:600!important;letter-spacing:-.03em;color:var(--hz-ink)!important}
.brand .dot,.nav .dot,.brand span:first-child:empty{background:var(--hz-gradient)!important;box-shadow:none!important}
.nav-links a,.nav .lnk,.nav>div a{color:var(--hz-ink)!important;font-weight:500;background:transparent}
.nav-links a:hover,.nav .lnk:hover,.nav>div a:hover{color:var(--hz-fog)!important;background:transparent!important}
.nav-links a.active,.nav-links a[aria-current]{color:var(--hz-ink)!important;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--hz-iris)}
.nav-cta{background:transparent!important;color:var(--hz-ink)!important;border:1px solid var(--hz-ink)!important;border-radius:8px!important;font-family:var(--hz-sans)!important;font-weight:500!important}
.nav-cta:hover{background:var(--hz-ink)!important;color:var(--hz-canvas)!important}
@media(max-width:720px){.nav-links a{background:var(--hz-card)!important;border:1px solid var(--hz-line-soft);border-radius:8px}}

/* Eyebrows and category labels: 13–14px medium in lilac, not mono caps */
.hw-intro,.eyebrow,.kicker,.cat,.gc-cat,.tool-badge{font-family:var(--hz-sans)!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--hz-lilac)!important}
.hw-intro,.eyebrow,.cat{font-size:14px!important}
.gc-cat{font-size:13px!important}
.tool-badge{background:var(--hz-iris-wash)!important;border-radius:320px!important;padding:3px 10px!important;font-size:12px!important}

/* Hero */
.hero-h,.hero h1{font-weight:500!important;letter-spacing:-.035em!important;line-height:1.02!important}
.hero-h{font-size:clamp(40px,6.2vw,80px)!important;max-width:16ch!important}
.hero-sub,.lede,.hero>p:not(.eyebrow){color:var(--hz-fog)!important;font-size:18px;line-height:1.55}
.hero-h .em,.hero-h .em2{color:inherit}

/* Cards: card surface, hairline border, 16px radius, whisper shadow */
.card,.guide-card,.pal,.variant,.mini,.callout,.related,.start-panel,.direction,.workbench,.hw-studio,.hw-related a,.code-chip,pre{
  background:var(--hz-card)!important;border-color:var(--hz-line)!important}
.card,.guide-card,.pal,.variant,.callout,.related,.start-panel,.workbench,.hw-studio{border-radius:16px!important}
.guide-card,.card{box-shadow:var(--hz-shadow)}
.guide-card:hover,.mini:hover,.hw-related a:hover{border-color:var(--hz-line-strong)!important;transform:translateY(-2px)}
.gc-title{font-weight:500!important;letter-spacing:-.01em}
.gc-desc,.sub,.sub2,.why,.char,.prose p,.faq p{color:var(--hz-fog)!important}

/* Buttons: neutral 8px controls; violet only for the primary action */
.btn,.hw-studio button,.hw-studio select,.code-chip,.copy-pre,.mode-tabs button,.constraints button,.color-start button,.actions button,.direction button,.image-picks button{
  font-family:var(--hz-sans)!important;background:var(--hz-raised)!important;border:1px solid var(--hz-line-strong)!important;border-radius:8px!important;color:var(--hz-ink)!important;font-weight:500}
.btn:hover,.hw-studio button:hover,.code-chip:hover,.copy-pre:hover,.mode-tabs button:hover,.constraints button:hover{background:#2C2B28!important;border-color:#55534F!important}
.mode-tabs button[aria-selected=true],.constraints button[aria-pressed=true],.image-picks button[aria-pressed=true],.choice[aria-pressed=true]{background:var(--hz-iris-wash)!important;border-color:var(--hz-iris)!important;color:var(--hz-ink)!important}
.open-picker,.hw-primary,.hw-studio .hw-primary,#hw-generate,.primary,.btn.primary,.find-btn,.cta-primary{
  background:var(--hz-iris)!important;color:#fff!important;border:1px solid var(--hz-iris)!important;border-radius:8px!important;font-family:var(--hz-sans)!important;font-weight:500!important;
  box-shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.2)}
.open-picker:hover,.hw-primary:hover,#hw-generate:hover,.primary:hover{background:var(--hz-iris-hover)!important;border-color:var(--hz-iris-hover)!important}

/* Inputs */
.hw-studio input[type=text],.color-start input[type=text],select,textarea{background:var(--hz-canvas)!important;border:1px solid var(--hz-line-strong)!important;border-radius:8px!important;color:var(--hz-ink)!important}
.hw-studio,.hw-related,.hw-guide{--hw-line:var(--hz-line);--hw-muted:var(--hz-fog);font-family:var(--hz-sans)!important}
.hw-studio :focus-visible,.hw-related a:focus-visible{outline:2px solid var(--hz-lilac)!important}

/* Links in prose */
.prose a,.about a,.hw-guide a,.intro a,.faq a,.sub a,article a{color:var(--hz-iris-text)!important;text-decoration-color:rgba(157,140,255,.45)}
.prose a:hover,.about a:hover,article a:hover{text-decoration-color:currentColor}

/* Status badges keep their semantic colors */
.badge.pass{background:#123c26!important;color:#7ee2a8!important}
.badge.fail{background:#3c1216!important;color:#f08a94!important}

/* Footer */
footer,.site-footer{border-top-color:var(--hz-line-soft)!important;color:var(--hz-faint)!important;font-family:var(--hz-sans)!important}
footer a{color:var(--hz-fog)!important}
footer a:hover{color:var(--hz-ink)!important}

@media (prefers-reduced-motion:reduce){.guide-card:hover,.mini:hover,.hw-related a:hover{transform:none}}

/* Analytics consent banner (styled inline by analytics.js) */
section[aria-label="Analytics choice"]{background:var(--hz-card)!important;border:1px solid var(--hz-line)!important;border-radius:16px!important;font-family:var(--hz-sans)!important;box-shadow:var(--hz-shadow)}
section[aria-label="Analytics choice"] p{color:var(--hz-ink);margin:0 0 4px}
section[aria-label="Analytics choice"] button{font-family:var(--hz-sans);font-weight:500;border-radius:8px;border:1px solid var(--hz-line-strong);background:var(--hz-raised);color:var(--hz-ink);cursor:pointer;min-height:44px}
/* Allow and Decline stay visually equal on purpose (consent must not nudge). */

/* Creative-start gateway: the one gradient-bordered "prompt" surface */
.creative-gateway{background:linear-gradient(var(--hz-card),var(--hz-card)) padding-box,var(--hz-gradient) border-box!important;border:2px solid transparent!important;border-radius:16px!important;box-shadow:none!important}
.creative-gateway>div>p{font-family:var(--hz-sans)!important;font-size:14px!important;font-weight:500!important;letter-spacing:0!important;text-transform:none!important;color:var(--hz-lilac)!important}
.creative-gateway>div>span{color:var(--hz-fog)!important}
.creative-gateway>a{background:var(--hz-iris)!important;color:#fff!important;border-radius:8px!important;font-weight:500!important;box-shadow:none!important}
.creative-gateway>a:hover{background:var(--hz-iris-hover)!important}
.cg-path i,.cg-path b{border-color:var(--hz-lilac)!important;background-color:var(--hz-lilac)!important;box-shadow:none!important}
.hw-related a>span:first-child{font-size:13px;font-weight:500;color:var(--hz-lilac)!important;letter-spacing:0;text-transform:none}

/* Small screens: let link-style navs wrap under the brand instead of squeezing */
@media(max-width:600px){.nav:has(.lnk){flex-wrap:wrap;gap:4px;position:static}.nav:has(.lnk) .sp{flex-basis:100%;height:0}.nav:has(.lnk) a.lnk{padding:6px 8px;font-size:13px}}

/* Native file picker button */
input[type=file]{color:var(--hz-fog);font-family:var(--hz-sans)}
input[type=file]::file-selector-button{font:500 13px var(--hz-sans);background:var(--hz-raised);color:var(--hz-ink);border:1px solid var(--hz-line-strong);border-radius:8px;padding:9px 14px;margin-right:10px;cursor:pointer}
input[type=file]::file-selector-button:hover{background:#2C2B28}