/* Hoozzee v2 · tokens.css · single source of truth
   Layer order: 1) primitives  2) semantic tokens  3) Bootstrap 5 mapping  4) hz components
   Scoped to html[data-ui="v2"] so the Zeta look stays intact while the flag is off. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400 700;font-display:swap;src:url("../../fonts/inter/inter-latin.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;}
:where(html[data-ui="v2"]){/* 1 · primitives */
  --ink-950:#0F0E17; --ink-900:#17161F; --ink-800:#25232F; --ink-700:#3A3846; --ink-600:#555362;
  --ink-500:#6E6C7A; --ink-400:#9896A3; --ink-300:#C9C7D1; --ink-200:#E4E3E8; --ink-150:#ECEBEF;
  --ink-100:#F3F2F5; --ink-50:#F8F8F9; --paper:#FBFBFA; --white:#FFFFFF;
  --violet-700:#433C9E; --violet-600:#544CC2; --violet-500:#605AB4; --violet-200:#D9D6F5; --violet-100:#EEEDFB; --violet-50:#F6F5FD;
  --green-700:#17663E; --green-100:#E3F3EA; --amber-700:#8A5300; --amber-100:#FBF0DC;
  --red-700:#B42318; --red-100:#FCE8E6; --blue-700:#1F5FAD; --blue-100:#E6EFFA;

  /* 2 · semantic */
  --hz-bg:var(--paper); --hz-surface:var(--white); --hz-surface-sunken:var(--ink-50); --hz-surface-hover:var(--ink-100);
  --hz-border:var(--ink-150); --hz-border-strong:var(--ink-200);
  --hz-text:var(--ink-900); --hz-text-2:var(--ink-600); --hz-text-3:var(--ink-500); --hz-text-inverse:var(--white);
  --hz-accent:var(--violet-600); --hz-accent-hover:var(--violet-700); --hz-accent-soft:var(--violet-100); --hz-accent-text:var(--violet-700);
  --hz-success:var(--green-700); --hz-success-soft:var(--green-100);
  --hz-warning:var(--amber-700); --hz-warning-soft:var(--amber-100);
  --hz-danger:var(--red-700); --hz-danger-soft:var(--red-100);
  --hz-info:var(--blue-700); --hz-info-soft:var(--blue-100);
  --hz-focus:0 0 0 2px var(--white),0 0 0 4px var(--violet-600);

  /* type: Inter, 1.2 minor-third-ish scale, tabular figures for money */
  --hz-font:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --hz-fs-xs:12px; --hz-fs-sm:13px; --hz-fs-base:14px; --hz-fs-md:15px; --hz-fs-lg:18px;
  --hz-fs-xl:22px; --hz-fs-2xl:28px; --hz-fs-3xl:36px; --hz-fs-4xl:48px;
  --hz-lh-tight:1.15; --hz-lh-snug:1.35; --hz-lh:1.55;
  --hz-track-tight:-0.022em; --hz-track-display:-0.035em; --hz-track-caps:0.06em;

  /* spacing: 4px half-step, 8px rhythm */
  --hz-1:4px; --hz-2:8px; --hz-3:12px; --hz-4:16px; --hz-5:20px; --hz-6:24px; --hz-8:32px; --hz-10:40px; --hz-12:48px; --hz-16:64px; --hz-20:80px;
  --hz-radius-sm:8px; --hz-radius:12px; --hz-radius-lg:16px; --hz-radius-pill:999px;
  --hz-shadow-xs:0 1px 2px rgba(15,14,23,.04);
  --hz-shadow-pop:0 1px 2px rgba(15,14,23,.04),0 12px 32px -8px rgba(15,14,23,.14);
  --hz-ease:cubic-bezier(.2,.7,.2,1); --hz-dur-fast:120ms; --hz-dur:200ms;
  --hz-touch:44px; --hz-sidebar:248px;

  /* 3 · Bootstrap 5 mapping (BS 5.0 reads a subset; Sass build should set the same values: $primary:#544CC2 etc.) */
  --bs-primary:var(--hz-accent); --bs-primary-rgb:84,76,194;
  --bs-body-font-family:var(--hz-font); --bs-body-font-size:var(--hz-fs-base); --bs-body-color:var(--hz-text); --bs-body-bg:var(--hz-bg);
  --bs-border-color:var(--hz-border); --bs-border-radius:var(--hz-radius-sm); --bs-border-radius-lg:var(--hz-radius);
  --bs-success:var(--hz-success); --bs-warning:var(--hz-warning); --bs-danger:var(--hz-danger); --bs-info:var(--hz-info);
  --bs-link-color:var(--hz-accent-text);}
@media (prefers-reduced-motion:reduce){
  :where(html[data-ui="v2"]){--hz-dur-fast:0ms; --hz-dur:0ms;}
  :where(html[data-ui="v2"]), :where(html[data-ui="v2"]) *{animation:none!important; transition:none!important; scroll-behavior:auto!important;}
}
/* 4 · base + components (all prefixed .hz-) */
:where(html[data-ui="v2"]), :where(html[data-ui="v2"]) *{box-sizing:border-box}
:where(html[data-ui="v2"]), :where(html[data-ui="v2"]) body{margin:0}
:where(html[data-ui="v2"]) body{font-family:var(--hz-font);font-size:var(--hz-fs-base);line-height:var(--hz-lh);color:var(--hz-text);background:var(--hz-bg);
  -webkit-font-smoothing:antialiased;font-feature-settings:"cv11","ss01"}
:where(html[data-ui="v2"]) .num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum","cv11"}
:where(html[data-ui="v2"]) a{color:var(--hz-accent-text)}
:where(html[data-ui="v2"]) :focus-visible{outline:none;box-shadow:var(--hz-focus);border-radius:var(--hz-radius-sm)}
:where(html[data-ui="v2"]) svg.lucide{width:18px;height:18px;stroke-width:1.75;flex:none}
/* :where() adds no specificity, so a theme rule such as svg { width:100% } stretches these icons to the card.
   This selector wins, and the width/height attributes on the svg cover the case before the stylesheet applies. */
html[data-ui="v2"] svg.lucide{width:18px;height:18px;max-width:24px;max-height:24px;flex:none}
html[data-ui="v2"] .hz-tabbar svg.lucide{width:22px;height:22px;max-width:24px;max-height:24px}
html[data-ui="v2"] .hz-mark svg{width:14px;height:14px;max-width:14px;max-height:14px}
:where(html[data-ui="v2"]) .hz-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--hz-2);min-height:var(--hz-touch);padding:0 var(--hz-4);
  border-radius:var(--hz-radius-sm);border:1px solid var(--hz-border-strong);background:var(--hz-surface);color:var(--hz-text);
  font:500 var(--hz-fs-base)/1 var(--hz-font);text-decoration:none;cursor:pointer;transition:background var(--hz-dur-fast) var(--hz-ease),border-color var(--hz-dur-fast)}
:where(html[data-ui="v2"]) .hz-btn:hover{background:var(--hz-surface-hover)}
:where(html[data-ui="v2"]) .hz-btn--primary{background:var(--hz-accent);border-color:var(--hz-accent);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),var(--hz-shadow-xs)}
:where(html[data-ui="v2"]) .hz-btn--primary:hover{background:var(--hz-accent-hover)}
:where(html[data-ui="v2"]) .hz-btn--ink{background:var(--ink-900);border-color:var(--ink-900);color:#fff}
:where(html[data-ui="v2"]) .hz-btn--ink:hover{background:var(--ink-700)}
:where(html[data-ui="v2"]) .hz-btn--lg{min-height:var(--hz-touch);font-size:var(--hz-fs-md);padding:0 var(--hz-5)}
:where(html[data-ui="v2"]) .hz-btn--ghost{border-color:transparent;background:transparent}
:where(html[data-ui="v2"]) .hz-card{background:var(--hz-surface);border:1px solid var(--hz-border);border-radius:var(--hz-radius-lg);box-shadow:var(--hz-shadow-xs)}
:where(html[data-ui="v2"]) .hz-eyebrow{font-size:var(--hz-fs-xs);font-weight:600;letter-spacing:var(--hz-track-caps);text-transform:uppercase;color:var(--hz-text-3)}
:where(html[data-ui="v2"]) .hz-badge{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:var(--hz-radius-pill);font-size:var(--hz-fs-xs);font-weight:500;background:var(--hz-surface-sunken);color:var(--hz-text-2);white-space:nowrap}
:where(html[data-ui="v2"]) .hz-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
:where(html[data-ui="v2"]) .hz-badge--danger{background:var(--hz-danger-soft);color:var(--hz-danger)}
:where(html[data-ui="v2"]) .hz-badge--warning{background:var(--hz-warning-soft);color:var(--hz-warning)}
:where(html[data-ui="v2"]) .hz-badge--success{background:var(--hz-success-soft);color:var(--hz-success)}
:where(html[data-ui="v2"]) .hz-badge--info{background:var(--hz-info-soft);color:var(--hz-info)}
:where(html[data-ui="v2"]) .hz-sample{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:500;color:var(--hz-text-3);border:1px dashed var(--ink-300);border-radius:var(--hz-radius-pill);padding:2px 10px}
/* field: label above, 44px control, real focus */
:where(html[data-ui="v2"]) .hz-field{display:grid;gap:var(--hz-2)}
:where(html[data-ui="v2"]) .hz-label{font-size:var(--hz-fs-sm);font-weight:500;color:var(--hz-text);display:flex;justify-content:space-between}
:where(html[data-ui="v2"]) .hz-input-wrap{position:relative;display:flex;align-items:center}
:where(html[data-ui="v2"]) .hz-input-wrap > svg{position:absolute;left:14px;color:var(--hz-text-3);pointer-events:none}
:where(html[data-ui="v2"]) .hz-input{width:100%;height:var(--hz-touch);padding:0 14px 0 42px;border:1px solid var(--hz-border-strong);border-radius:var(--hz-radius-sm);
  background:var(--hz-surface);font:400 var(--hz-fs-md) var(--hz-font);color:var(--hz-text);transition:border-color var(--hz-dur-fast),box-shadow var(--hz-dur-fast)}
:where(html[data-ui="v2"]) .hz-input::placeholder{color:var(--ink-400)}
:where(html[data-ui="v2"]) .hz-input:hover{border-color:var(--ink-300)}
:where(html[data-ui="v2"]) .hz-input:focus, :where(html[data-ui="v2"]) .hz-input.is-focus{outline:none;border-color:var(--hz-accent);box-shadow:0 0 0 4px var(--violet-100)}
:where(html[data-ui="v2"]) .hz-input-wrap .hz-icon-btn{position:absolute;right:2px}
:where(html[data-ui="v2"]) .hz-icon-btn{display:inline-grid;place-items:center;width:var(--hz-touch);height:var(--hz-touch);border-radius:var(--hz-radius-sm);border:0;background:transparent;color:var(--hz-text-2);cursor:pointer}
:where(html[data-ui="v2"]) .hz-icon-btn:hover{background:var(--hz-surface-hover);color:var(--hz-text)}
/* app shell */
:where(html[data-ui="v2"]) .hz-app{display:grid;grid-template-columns:var(--hz-sidebar) 1fr;min-height:100vh;background:linear-gradient(90deg,var(--ink-50) var(--hz-sidebar),var(--hz-bg) var(--hz-sidebar))}
:where(html[data-ui="v2"]) .hz-side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:var(--hz-4) var(--hz-3);border-right:1px solid var(--hz-border);background:var(--ink-50)}
:where(html[data-ui="v2"]) .hz-brand{display:flex;align-items:center;gap:10px;height:40px;padding:0 var(--hz-2);font-weight:650;font-size:var(--hz-fs-md);letter-spacing:var(--hz-track-tight);color:var(--hz-text);text-decoration:none}
:where(html[data-ui="v2"]) .hz-mark{width:26px;height:26px;border-radius:8px;background:var(--ink-900);display:grid;place-items:center}
:where(html[data-ui="v2"]) .hz-workspace{margin:var(--hz-3) 0 var(--hz-2);display:flex;align-items:center;gap:10px;width:100%;min-height:var(--hz-touch);padding:0 var(--hz-2);border:1px solid var(--hz-border);border-radius:var(--hz-radius);background:var(--hz-surface);font:inherit;color:inherit;text-align:left;cursor:pointer}
:where(html[data-ui="v2"]) .hz-workspace small{display:block;color:var(--hz-text-3);font-size:var(--hz-fs-xs);line-height:1.2}
:where(html[data-ui="v2"]) .hz-workspace b{display:block;font-weight:550;font-size:var(--hz-fs-sm);line-height:1.3}
:where(html[data-ui="v2"]) .hz-avatar{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:11px;font-weight:600;background:var(--violet-100);color:var(--violet-700);flex:none}
:where(html[data-ui="v2"]) .hz-nav{display:grid;gap:2px;margin-top:var(--hz-3)}
:where(html[data-ui="v2"]) .hz-nav-group{margin-top:var(--hz-5);padding:0 var(--hz-2) var(--hz-2);font-size:11px;font-weight:600;letter-spacing:var(--hz-track-caps);text-transform:uppercase;color:var(--hz-text-3)}
:where(html[data-ui="v2"]) .hz-nav a{position:relative;display:flex;align-items:center;gap:var(--hz-3);min-height:var(--hz-touch);height:auto;padding:0 var(--hz-2);border-radius:var(--hz-radius-sm);
  color:var(--hz-text-2);text-decoration:none;font-weight:500;font-size:var(--hz-fs-base);transition:background var(--hz-dur-fast)}
:where(html[data-ui="v2"]) .hz-nav a:hover{background:var(--hz-surface-hover);color:var(--hz-text)}
:where(html[data-ui="v2"]) .hz-nav a[aria-current="page"]{background:var(--hz-surface);color:var(--hz-text);box-shadow:0 0 0 1px var(--hz-border),var(--hz-shadow-xs)}
:where(html[data-ui="v2"]) .hz-nav a[aria-current="page"] svg{color:var(--hz-accent)}
:where(html[data-ui="v2"]) .hz-nav .count{margin-left:auto;font-size:var(--hz-fs-xs);color:var(--hz-text-3);font-variant-numeric:tabular-nums}
:where(html[data-ui="v2"]) .hz-nav .count--alert{color:var(--hz-danger);font-weight:600}
:where(html[data-ui="v2"]) .hz-side-foot{margin-top:auto;display:grid;gap:var(--hz-3)}
:where(html[data-ui="v2"]) .hz-plan{padding:var(--hz-3) var(--hz-3);border:1px solid var(--hz-border);border-radius:var(--hz-radius);background:var(--hz-surface);font-size:var(--hz-fs-sm)}
:where(html[data-ui="v2"]) .hz-meter{height:4px;border-radius:4px;background:var(--ink-150);overflow:hidden;margin:var(--hz-2) 0}
:where(html[data-ui="v2"]) .hz-meter i{display:block;height:100%;background:var(--ink-900);border-radius:4px}
:where(html[data-ui="v2"]) .hz-main{min-width:0}
:where(html[data-ui="v2"]) .hz-topbar{height:60px;display:flex;align-items:center;gap:var(--hz-3);padding:0 var(--hz-10);border-bottom:1px solid var(--hz-border);background:rgba(251,251,250,.85);backdrop-filter:blur(8px);position:sticky;top:0;z-index:5}
:where(html[data-ui="v2"]) .hz-search{white-space:nowrap;display:flex;align-items:center;gap:var(--hz-2);height:36px;width:340px;padding:0 var(--hz-3);border:1px solid var(--hz-border);border-radius:var(--hz-radius-sm);background:var(--hz-surface);color:var(--hz-text-3);font-size:var(--hz-fs-sm)}
:where(html[data-ui="v2"]) .hz-kbd{margin-left:auto;font-size:11px;border:1px solid var(--hz-border-strong);border-radius:5px;padding:1px 6px;color:var(--hz-text-3)}
:where(html[data-ui="v2"]) .hz-crumb{font-size:var(--hz-fs-sm);color:var(--hz-text-3)}
:where(html[data-ui="v2"]) .hz-crumb b{color:var(--hz-text);font-weight:550}
/* mobile tab bar */
:where(html[data-ui="v2"]) .hz-tabbar{display:none}
:where(html[data-ui="v2"]) .hz-mtop{display:none}
@media (max-width:767px){
  :where(html[data-ui="v2"]) .hz-app{grid-template-columns:1fr;background:var(--hz-bg)}
  :where(html[data-ui="v2"]) .hz-side, :where(html[data-ui="v2"]) .hz-topbar{display:none}
  :where(html[data-ui="v2"]) .hz-mtop{display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 var(--hz-4);border-bottom:1px solid var(--hz-border);background:var(--hz-bg);position:sticky;top:0;z-index:5}
  :where(html[data-ui="v2"]) .hz-tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:10;height:72px;padding:6px 8px 14px;
    background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--hz-border)}
  :where(html[data-ui="v2"]) .hz-tabbar a{display:grid;justify-items:center;align-content:center;gap:3px;min-height:var(--hz-touch);font-size:11px;font-weight:500;color:var(--hz-text-3);text-decoration:none;border-radius:var(--hz-radius-sm)}
  :where(html[data-ui="v2"]) .hz-tabbar a[aria-current="page"]{color:var(--hz-text)}
  :where(html[data-ui="v2"]) .hz-tabbar a[aria-current="page"] svg{color:var(--hz-accent)}
  :where(html[data-ui="v2"]) .hz-tabbar svg.lucide{width:22px;height:22px}
  :where(html[data-ui="v2"]) .hz-tabbar .fab{width:48px;height:48px;border-radius:14px;background:var(--ink-900);color:#fff;display:grid;place-items:center;margin-top:-2px}
  :where(html[data-ui="v2"]) .hz-tabbar .fab svg{color:#fff}
}