/* ==== APP TOKENS — the concept's own design system, used only inside
   .canvas (the screens). The concept (LP Loop, Figma node 31526:36926 and
   the shared style variables in the same file) is a light B2B app with no
   dark variant designed — light is this project's shipped default in
   :root; the dark variant under .canvas[data-app-theme="dark"] below is
   derived (background/ink flipped, brand/status hues kept close to source)
   since the concept itself never specifies one. ---- */
:root{
  --background-primary:#FFFFFF;
  --background-secondary:#F7F8FA;
  --background-tertiary:#F1F2F4;
  --ink-primary:#152128;
  --ink-secondary:#717182;
  --ink-tertiary:#9696AA;
  --ink-foreground:#FFFFFF;
  --brand-primary:#395C83;
  --brand-secondary:#395C83;
  --brand-tertiary:#314E70;
  --brand-secondary-light:#EEF3F9;
  --brand-border:rgba(58,100,126,.15);
  --danger:#E71D32;
  --success:#42AE5A;
  --warning:#DD9C33;
  --pending:#347BBD;

  /* ---- type (Figtree; px @1x) ---- */
  --t-h1:28px; --t-h1-lh:34px;
  --t-h2:22px; --t-h2-lh:28px;
  --t-m:16px;  --t-m-lh:22px;
  --t-s:14px;  --t-s-lh:20px;
  --t-xs:12px; --t-xs-lh:16px;
  --t-l:18px;

  /* ---- spacing (4pt grid) ---- */
  --s-3xs:4px; --s-2xs:6px; --s-xs:8px; --s-s:12px; --s-m:16px;
  --s-l:20px; --s-xl:24px; --s-2xl:32px; --s-3xl:40px;

  /* ---- radius ---- */
  --r-s:6px; --r-m:8px; --r-l:12px; --r-full:999px;

  /* ---- size ---- */
  --h-control:44px;
  --gutter:20px;
  --page-max:1280px; /* content max-width — web pages don't fill edge-to-edge at desktop widths */
}

/* app dark theme — derived; the concept itself is light-only */
.canvas[data-app-theme="dark"]{
  --background-primary:#12161C;
  --background-secondary:#1A1F26;
  --background-tertiary:#232A33;
  --ink-primary:#F3F5F7;
  --ink-secondary:#A7B0BC;
  --ink-tertiary:#7C8794;
  --ink-foreground:#FFFFFF;
  --brand-primary:#6896B8;
  --brand-secondary:#7FA6C7;
  --brand-tertiary:#9CC0DE;
  --brand-secondary-light:#1E2B36;
  --brand-border:rgba(150,192,222,.18);
  --danger:#FF6B7A;
  --success:#5BC97D;
  --warning:#E8B559;
  --pending:#6BA9E8;
}

/* compact typekit — real narrow viewports only (single-screen view is a true
   fullscreen page; side-by-side view's canvas is a fixed 1280px pane, so
   this never fires there unless the browser window itself is this narrow).
   Headings shrink the most, body/caption sizes barely move. */
@media (max-width:767px){
  :root{
    --t-h1:24px; --t-h1-lh:30px;
    --t-h2:19px; --t-h2-lh:25px;
    --t-m:15px;  --t-m-lh:21px;
    --t-s:13px;  --t-s-lh:18px;
    --t-xs:11px; --t-xs-lh:15px;
    --t-l:16px;
  }
}