/* Inserator Design Tokens v1.1 — canonical metrics for Web-App + local Extension */
:root{
  --ins-font-sans:"Segoe UI Variable Text","Segoe UI",Arial,sans-serif;
  --ins-font-display:"Segoe UI Variable Display","Segoe UI",Arial,sans-serif;

  --ins-charcoal:#0F1115;
  --ins-graphite:#3B3834;
  --ins-taupe:#A89B8F;
  --ins-sand:#D9D0C6;
  --ins-cream:#F6F3EE;
  --ins-white:#FFFFFF;
  --ins-success:#2F8B59;
  --ins-danger:#B5483E;

  --ins-bg:#F6F3EE;
  --ins-surface:#FFFDFA;
  --ins-surface-soft:#F1ECE5;
  --ins-surface-muted:#EAE4DC;
  --ins-text:#0F1115;
  --ins-muted:#746F68;
  --ins-line:#DED6CC;
  --ins-line-strong:#C9BFB3;

  /* Shell geometry — change here, both experiences follow the same rhythm. */
  --ins-header-h:68px;
  --ins-sidebar-w:220px;
  --ins-sidebar-pad-x:14px;
  --ins-sidebar-pad-top:22px;
  --ins-shell-pad-x:18px;
  --ins-content-max:1600px;
  --ins-content-gutter:24px;
  --ins-page-top:26px;
  --ins-page-bottom:70px;
  --ins-page-head-gap:16px;
  --ins-section-gap:14px;

  --ins-radius-xs:8px;
  --ins-radius-sm:10px;
  --ins-radius-md:12px;
  --ins-radius-lg:16px;
  --ins-radius-xl:20px;

  /* Type scale */
  --ins-font-brand:15px;
  --ins-font-brand-sub:9px;
  --ins-font-sidebar-title:10px;
  --ins-font-nav:12px;
  --ins-font-control:11px;
  --ins-font-label:10px;
  --ins-font-body:13px;
  --ins-font-body-lg:14px;
  --ins-font-page-title:40px;
  --ins-font-page-subtitle:14px;
  --ins-font-section-title:15px;

  /* Controls / rows */
  --ins-control-h:40px;
  --ins-nav-h:46px;
  --ins-nav-icon:28px;
  --ins-brand-mark:42px;
  --ins-table-head-h:42px;
  --ins-table-row-h:72px;

  --ins-shadow-xs:0 2px 7px rgba(31,27,23,.07);
  --ins-shadow-sm:0 8px 28px rgba(48,40,32,.05);
  --ins-shadow-md:0 16px 46px rgba(48,40,32,.08);
}
html[data-theme="dark"]{
  --ins-bg:#1B1A18;
  --ins-surface:#24221F;
  --ins-surface-soft:#2D2A26;
  --ins-surface-muted:#34312D;
  --ins-text:#F7F3EC;
  --ins-muted:#B4ABA1;
  --ins-line:#403B35;
  --ins-line-strong:#554E46;
  --ins-shadow-xs:none;
  --ins-shadow-sm:none;
  --ins-shadow-md:none;
}
@media(max-width:900px){:root{--ins-sidebar-w:190px;--ins-content-gutter:18px;--ins-font-page-title:36px}}
@media(max-width:680px){:root{--ins-header-h:64px;--ins-sidebar-w:0px;--ins-shell-pad-x:10px;--ins-content-gutter:14px;--ins-page-top:18px;--ins-font-page-title:32px}}

html,body,button,input,textarea,select{font-family:var(--ins-font-sans)}
.ins-brand-lockup{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ins-text);min-width:0}
.ins-brand-mark{width:var(--ins-brand-mark);height:var(--ins-brand-mark);flex:0 0 var(--ins-brand-mark);border-radius:12px;display:grid;place-items:center;overflow:visible}
.ins-brand-mark img{width:100%;height:100%;display:block;object-fit:contain}
.ins-brand-mark .brand-dark{display:none}
html[data-theme="dark"] .ins-brand-mark .brand-light{display:none}
html[data-theme="dark"] .ins-brand-mark .brand-dark{display:block}
.ins-brand-copy{min-width:0;display:flex;flex-direction:column;line-height:1.05}
.ins-brand-name{font-family:var(--ins-font-display);font-size:var(--ins-font-brand);font-weight:800;letter-spacing:-.035em;color:var(--ins-text);white-space:nowrap}
.ins-brand-scope{margin-top:3px;display:flex;align-items:center;gap:5px;font-size:var(--ins-font-brand-sub);font-weight:650;color:var(--ins-muted);white-space:nowrap}
.ins-brand-scope img{width:12px;height:12px;display:block;object-fit:contain}
html[data-theme="dark"] .ins-brand-scope img{filter:invert(.9) sepia(.06) saturate(.4) brightness(1.25)}