/* GENERATED — do not edit. source: hoq/tokens/hoq-tokens.json */
@font-face{font-family:'Bricolage';src:url('https://id.hoq.app/assets/bricolage.woff2') format('woff2');font-weight:400 800;font-display:swap}

:root{
  --hoq-bg:#f2f5f5;
  --hoq-surface:#ffffff;
  --hoq-inset:#eef2f3;
  --hoq-track:#e2e9ea;
  --hoq-border:#dde5e6;
  --hoq-line:#ecf1f1;
  --hoq-btn:#f4f7f7;
  --hoq-btn-hover:#b9c9cb;
  --hoq-active:#e2ecec;
  --hoq-text:#16232b;
  --hoq-muted:#5d7078;
  --hoq-accent:#0f9d8f;
  --hoq-accent-ink:#ffffff;
  --hoq-ok:#177d51;
  --hoq-ok-border:#9fdcbb;
  --hoq-warn:#9a5b00;
  --hoq-warn-border:#f2d3a0;
  --hoq-bad:#b42335;
  --hoq-bad-border:#f3b3bb;
  --hoq-lamp-ok:#22c55e;
  --hoq-lamp-ring:#f59e0b;
  --hoq-lamp-off:#94a3ab;
  --hoq-shadow-pop:0 24px 60px -18px rgba(22,35,43,.35);
  --hoq-shadow-modal:0 40px 100px -24px rgba(22,35,43,.45);
  --hoq-canvas:#0c1417;
  --hoq-canvas-2:#101a1e;
  --hoq-canvas-line:#22323a;
  --hoq-canvas-ink:#f2f5f5;
  --hoq-canvas-muted:#9fb6b6;
  --hoq-checker-a:#101a1e;
  --hoq-checker-b:#0c1417;
  --hoq-checker-size:24px;
  --hoq-cut:#ff3ea5;
  --hoq-font-text:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hoq-font-display:'Bricolage',var(--hoq-font-text);
  --hoq-font-mono:ui-monospace,"SF Mono",Menlo,monospace;
  --hoq-s0:2px;
  --hoq-s1:4px;
  --hoq-s2:6px;
  --hoq-s3:8px;
  --hoq-s4:12px;
  --hoq-s5:16px;
  --hoq-s6:24px;
  --hoq-s7:32px;
  --hoq-s8:48px;
  --hoq-r-sm:6px;
  --hoq-r-md:10px;
  --hoq-r-lg:14px;
  --hoq-r-pill:999px;
  --hoq-t-press:60ms;
  --hoq-t-1:90ms;
  --hoq-t-2:140ms;
  --hoq-t-3:220ms;
  --hoq-ease:cubic-bezier(.2,.8,.2,1);
  --hoq-ease-io:cubic-bezier(.4,0,.2,1);
  --hoq-focus-halo:0 0 0 2px var(--hoq-surface),0 0 0 4px var(--hoq-accent);
  --m-text:var(--hoq-text);
  --m-muted:var(--hoq-muted);
  --m-card:var(--hoq-surface);
  --m-inset:var(--hoq-inset);
  --m-track:var(--hoq-track);
  --m-border:var(--hoq-border);
  --m-line:var(--hoq-line);
  --m-btn:var(--hoq-btn);
  --m-btn-hover:var(--hoq-btn-hover);
  --m-active:var(--hoq-active);
  --m-ok:var(--hoq-ok);
  --m-ok-border:var(--hoq-ok-border);
  --m-bad:var(--hoq-bad);
  --m-bad-border:var(--hoq-bad-border);
  --m-accent:var(--hoq-accent);
  --m-accent-ink:var(--hoq-accent-ink);
  --m-lamp-ok:var(--hoq-lamp-ok);
  --m-lamp-ring:var(--hoq-lamp-ring);
  --m-lamp-off:var(--hoq-lamp-off);
  --m-shadow-pop:var(--hoq-shadow-pop);
}

html[data-theme=dark]{
  --hoq-bg:#0c1417;
  --hoq-surface:#121d21;
  --hoq-inset:#0f181c;
  --hoq-track:#17242a;
  --hoq-border:#22333a;
  --hoq-line:#1b2b31;
  --hoq-btn:#182930;
  --hoq-btn-hover:#3c565f;
  --hoq-active:#1d3239;
  --hoq-text:#e4edf0;
  --hoq-muted:#8ba0a8;
  --hoq-accent:#2fd4be;
  --hoq-accent-ink:#062b26;
  --hoq-ok:#4ade80;
  --hoq-ok-border:#1e5636;
  --hoq-warn:#fbbf24;
  --hoq-warn-border:#6b4a10;
  --hoq-bad:#f87f8e;
  --hoq-bad-border:#6e2530;
  --hoq-lamp-ok:#34d97b;
  --hoq-lamp-ring:#fbbf24;
  --hoq-lamp-off:#4b5d66;
  --hoq-shadow-pop:0 26px 70px -16px rgba(0,0,0,.7);
  --hoq-shadow-modal:0 44px 120px -20px rgba(0,0,0,.8);
}

html{color-scheme:light dark}